带参数的Mixin
带参数的mixin
在Less中,还可以像函数一样定义一个带参数的mixin, 这种形式叫做 Parametric Mixin,即带参数的混入。如:
// 定义一个样式选择器
.borderRadius(@radius){
border-radius: @radius;
}
然后,在其他选择器中像这样调用它:
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px); // 把 3px 作为参数传递给样式选择器
}
编译后的CSS代码为:
#header {
border-radius: 10px;
}
.btn {
border-radius: 3px;
}
还可以给 Mixin 的参数设置默认值,有了默认值,在调用它的时候,如果没有提供该参数,它就会使用默认值。比如,设置默认值为 5px:
.borderRadius(@radius:5px){
border-radius: @radius;
}
.btn {
.borderRadius;
}
由于在调用 .borderRadius 时没有传递参数,它就会使用默认值 5px。编译后的CSS代码为:
.btn {
border-radius: 5px;
}
Mixin还可以带多个参数,参数之间使用逗号或分号隔开。如:
.border(@width, @style, @color) {
border: @width @style @color;
}
h2 {
.border(2px, dashed, green);
}
编译后的CSS代码为:
h2 {
border: 2px dashed #008000;
}
虽然多个参数可以使用分号或者逗号分隔,推荐使用分号分隔,因为逗号既可以表示混合的参数,也可以表示一个参数中一组值的分隔符。
使用分号作为参数分隔符,就意味着可以将逗号分隔的一组值作为一个变量处理。换句话说,如果编译器在混入的定义或者调用中找到至少一个分号,就会假设参数是使用分号分隔的,则逗号将被看作是一个参数中一组值的分隔符。如:
.name(1, 2, 3; 4, 5) 就包含2个参数,1, 2, 3是一个参数,4, 5是一个参数。每个参数都是通过逗号分隔的一组值。
.name(1, 2, 3) 就包含3个参数,每个参数只含一个数字。也可以使用一个象征性的分号,如 .name(1, 2, 3;),就可以创建一个只含一个参数,但参数包含一组值的混入。
当包含多个参数时,Mixins是通过参数的名称,而不是位置来引用参数。也就是说,在使用的时候,如果提供参数名称,则参数的顺序并不重要。命名参数使代码更清晰、更容易阅读。如:
.mixin(@color: black, @fontSize: 10px) {
color: @color;
font-size: @fontSize;
}
.class1 {
.mixin(@fontSize: 20px, @color: #F5A9D0);
}
.class2 {
.mixin(#F79F81, @fontSize: 20px);
}
编译后的CSS代码为:
.class1 {
color: #f5a9d0;
font-size: 20px;
}
.class2 {
color: #f79f81;
font-size: 20px;
}
除此之外,像 JavaScript 中 arguments一样,Mixin 也有这样一个变量:@arguments。当 Mixin 引用这个参数时,它表示传递进来的所有参数。
很多情况下,@arguments参数可以省去很多代码。比如,在定义 box-shadow 的属性值时,如果不想单独处理每一个参数的话,就可以像这样写:
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
编译后的CSS代码为:
#header {
box-shadow: 2px 2px 3px #f36;
}
如果需要在 mixin 中不限制参数的数量,就可以在变量名后添加“...”,表示这里可以使用可变参数。这一点跟C语言比较类似。请看以下简单实例:
对于某些属性,它的参数个数是不确定的,而具体的参数个数,只有在使用的时候才知道,这种情况就适合使用可变参数。比如,padding 属性可以接受1个、或2个、或3个、或4个参数,就可以使用可变参数。Less代码如下:
.padding(...) {
padding: @arguments;
}
.class1 {
.padding(20px);
}
.class2 {
.padding(20px 30px);
}
.class3 {
.padding(20px 30px 40px);
}
.class4 {
.padding(20px 30px 40px 50px);
}
编译后的C
SS代码为:
.class1 {
padding: 20px;
}
.class2 {
padding: 20px 30px;
}
.class3 {
padding: 20px 30px 40px;
}
.class4 {
padding: 20px 30px 40px 50px;
}
可变参数的常见形式如下:
.mixin(...) { } // it matches arguments from 0-n
.mixin() { } // it matches exactly 0 arguments
.mixin(@x: 1) { } // it matches arguments from 0-1
.mixin(@x: 1, ...) { } // it matches arguments from 0-n
带参数的Mixin的更多相关文章
- less新手入门(二) Mixin 混合、带参数的Mixin
四.mixin 混合 "mix - in"属性来自现有的样式!! 你可以在类选择器和id选择器中使用mixin, .a,#b{ color: rebeccapurple; } . ...
- C#的泛型的类型参数可以有带参数的构造函数的约束方式吗?
Review后看到标题让我十分羞愧自己语文功底太差,估计...请见谅......我还特地把这句写回开头了...... 问题 前天遇到的一个问题,所以在MSDN发了个问,刚也丰富了下问题,关于泛型的. ...
- c#线程带参数
c#线程带参数 ThreadStart threadStart = delegate { LoadPicture(ds.Tables[0]); }; Thread thread = new Threa ...
- 【笔记】Asp.Net WebApi对js POST带参数跨域请求的支持方案
先说下需求:在原来的WebApi项目中增加对js跨域的请求支持,请求方式:以POST为主,webapi路由规则根据原项目需求修改如下: public static void Register(Http ...
- 用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨
先探讨方案,后续再实现. gulp打包前端教程配置:http://www.cnblogs.com/EasonJim/p/6209951.html 可能存在以下场景: 1.整个服务端采用接口的形式暴露给 ...
- C#微信公众号接口开发,灵活利用网页授权、带参数二维码、模板消息,提升用户体验之完成用户绑定个人微信及验证码获取
一.前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号 ...
- Oracle游标--cursor_01-简单不带参数实现功能
对于游标这个概念,可以理解为类似我们以前学习的jdbc的结果集对象, 我们可以使用游标对结果集从上到下进行遍历,获取每一行内容 首先我们要分析一下游标的分类 带参数的 书写函数的整体架构 定义游标 开 ...
- ngResource提交json数据如何带参数
ngResource提交json数据如何带参数 直接使用ngResource和REST服务接口交互可以让程序显得简洁,前提是配置好跨域和OPTIONS请求的支持,与此同时,如果需要带些额外的参数,有两 ...
- ui-router带参数的ui-sref配置
ui-router带参数的ui-sref配置 路由 .state('app.user_edit', { url:'user/userid/:userid', templateUrl: 'compone ...
随机推荐
- ELK系列~Nxlog日志收集加转发(解决log4日志换行导致json转换失败问题)
本文章将会继承上一篇文章,主要讲通过工具来进行日志的收集与发送,<ELK系列~NLog.Targets.Fluentd到达如何通过tcp发到fluentd> Nxlog是一个日志收集工具, ...
- LeetCode 54. Spiral Matrix(螺旋矩阵)
Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...
- JavaScript面向对象中的继承
1.1继承的基本概念 使用一个子类,继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承. >>>继承的两方,发生在两个类之间. 实现继承的三种方式: 扩展O ...
- swift 之xib自定义view可视化到storyboard
首先直入正题:@IBInspectable & @IBDesignable 对于 @IBInspectable 和 @IBDesignable 可详见官方文档 : Creating a Cus ...
- 笔记-java泛型详解
首先,先说明一下,java泛型文章的出处:http://www.cnblogs.com/lzq198754/p/5780426.html 作为学习笔记保存. 1.为什么需要泛型 泛型在Java中有很重 ...
- pandas数据结构练习题(部分)
更多函数查阅http://pandas.pydata.org/pandas-docs/stable/10min.htmlimport pandas as pd#两种数据结构from pandas im ...
- JSP异常之org.apache.jasper.JasperException(转)
According to TLD or attribute directive in tag file, attribute items does not accep t any expression ...
- spa(单页应用)中,使用history模式时,微信长按识别二维码在ios下失效的问题
spa(单页应用,vue)中,使用history模式时,微信长按识别二维码在ios下失效的问题. 触发条件: spa单页应用: 路由模式 history 从其他页面跳转到带有微信二维码识别的页面(不是 ...
- Ubuntu 12.04嵌入式交叉编译环境arm-linux-gcc搭建过程
Ubuntu 12.04嵌入式交叉编译环境arm-linux-gcc搭建过程Linux版本:Ubuntu 12.04 内核版本:Linux 3.5.0 交叉编译器版本:arm-linux-gcc-4. ...
- selenium_Alert
网页测试,最避免不了的就是弹出框,但是弹出框你真的分的清吗? Alert prompt comfirm 先来认识一下这三个弹窗 代码如下 <!DOCTYPE html> <html ...