Mixins
通过定义 类选择器 或者 id选择器 ， 可以调用 类选择器 或者是 id选择器 ，进行预编译前复用
一、mixin 简单定义
无括号选择器
无括号，选择器定义方式(编译后，会生成代码)
// 编译前.a, #b { color: red;}.mixin-class { .a();}.mixin-id { #b();}
// 编译后 .a,#b { color: red;}.mixin-class { color: red;}.mixin-id { color: red;}
// 此方法两个相同意思，都是调用.a().a
复制代码
带括号选择器
带括号，选择器定义方式（编译后，不会生成代码)
// 编译前// 不带括号的方式.my-mixin { color: black;}// 带括号的方式.my-other-mixin() { background: white;}// 调用方式.class { .my-mixin; .my-other-mixin;}
// 编译后--> 上面编译前的代码， .my-other-mixin的方法会没有.my-mixin { color: black;}.class { color: black; background: white;}
复制代码
内嵌选择器
除了样式的属性，还能定义多层的选择器
// 编译前.my-hover-mixin() { &:hover { border: 1px solid red; }}button { .my-hover-mixin();}
// 编译后button:hover { border: 1px solid red;}
复制代码
二、mixin 简单调用
单层调用
.my-hover-mixin();.my-hover-mixin
复制代码
namespace 嵌套调用
定义命名空间 Namespaces
为什么需要： 当我们有多个开发文件的时候，肯定会遇到命名冲突的，说以通过定义 namespaces.
// 编译前#outer { .inner { color: red; }}.c { // 多级选择器调用 #outer > .inner;}
// 编译后}#outer .inner { color: red;}.c { color: red;}
// 更多方法--方法如上，同等效果#outer > .inner;#outer > .inner();#outer .inner;#outer .inner();#outer.inner;#outer.inner();
复制代码
调用时加入!important
平时如果 css 开发的时候，想让一个 选择器所有都添加 !important; 那么需要在每个属性后面进行添加，通过 less 则可以通过定义个公共 Mixin，然后通过调用的时候，进行统一添加!important;
// 编译前.foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color;}.unimportant { .foo();}.important { // 加入 !important关键字 .foo() !important;}
// 编译后.unimportant { background: #f5f5f5; color: #900;}.important { background: #f5f5f5 !important; color: #900 !important;
复制代码
三、带参数的 mixin 定义
无默认参数
调用的时候需要传入值
// 编译前// mixin定义// 函数传参.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
// 调用#header { .border-radius(4px);}.button { .border-radius(6px);}// ---------------------------------// 编译后#header { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}.button { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
复制代码
默认参数
调用的时候不需要传入值
// 编译前.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}#header { .border-radius;}
// 编译后#header { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
复制代码
多个参数定义，无指定参数调用
多个参数，可以通过逗号 , 或者是分号 ; 间隔使用。可以重复定义多个参数，并且在调用的时候会多个 mixin 混用
// 编译前.mixin(@color) { color-1: @color;}.mixin(@color; @padding: 2) { color-2: @color; padding-2: @padding;}.mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin;}.some .selector div { .mixin(#008000, 2);}
// 编译后.some .selector div { color-2: #008000; padding-2: 2; color-3: #008000; padding-3: 2; margin: 2 2 2 2;}
复制代码
多个参数定义，通过指定参数调用
// 编译前.mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding;}.class1 { .mixin(@margin: 20px; @color: #33acfe);}.class2 { .mixin(#efca44; @padding: 40px);}
// 编译后.class1 { color: #33acfe; margin: 20px; padding: 20px;}.class2 { color: #efca44; margin: 10px; padding: 40px;}
复制代码
@arguments 调用
// 编译前.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments;}.big-block { .box-shadow(2px; 5px);}
// 编译后.big-block { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000;}
复制代码
6.@rest 形参解构
.mixin(@a; @rest...) { // @rest is bound to arguments after @a // @arguments is bound to all arguments}
复制代码
参数匹配相当于 switch 选择
// 符合dark条件匹配.mixin(dark; @color) { color: darken(@color, 10%);}// 符合light条件匹配.mixin(light; @color) { color: lighten(@color, 10%);}// 任何条件匹配.mixin(@_; @color) { display: block;}
// 定义条件--> 按条件调用@switch: light;.class { .mixin(@switch; #888);}
// ------------------// 编译后.class { color: #a2a2a2; display: block;}
复制代码
四、调用 mixin 内的变量与方法 rules
调用变量
同级变量获取, 可以获取 mixin调用函数里的变量 , 先获取函数作用域内的-> 再找全局的
// 编译前.mixin() { @width: 100%; @height: 200px;}
.caller { width: @width; height: @height; .mixin();}@width: 200%;
// 编译后.caller { width: 100%; height: 200px;}
复制代码
// 编译前.average(@x, @y) { @average: ((@x + @y) / 2);}div { .average(16px, 50px); padding: @average;}div { padding: 33px;}
复制代码
调用方法
// 编译前.unlock(@value) { // outer mixin .doSomething() { // nested mixin declaration: @value; }}
#namespace { .unlock(5); // unlock doSomething mixin .doSomething(); //nested mixin was copied here and is usable}
// 编译后#namespace { declaration: 5;}
复制代码
五、 mixins 传递规则
这个与mixins调用差别，规则传递相当于编程的时候传递一个回调函数，这个回调函数由内部帮你完成调用一个意思，而调用mixin 使用的是 .mixin()|| .mixin 的方式，但是.minxin方式规则就不能由外部传入进行修改，而是固定好的规则。
步骤：
通过定义规则
通过 @mixin(); 调用传递规则名
1、简单调用规则
// 编译前// 定义一条规则@detached-ruleset: { background: red; };
// 使用某条规则.top { @detached-ruleset(); }// 编译后.top { background: red;}
复制代码
2、通过 {} 传递一个规则，通过 @rules(); 进行调用
// 编译前.desktop-and-old-ie(@rules) { // 调用自定义规则 @media screen and (min-width: 1200) { @rules(); } html.lt-ie9 & { @rules(); }}
header { background-color: blue; // 传递自定义的规则 .desktop-and-old-ie({ background-color: red; });}
// 编译后header { background-color: blue;}@media screen and (min-width: 1200) { header { background-color: red; }}html.lt-ie9 header { background-color: red;}
复制代码
rules 规则调用作用域里变量和方法
@detached-ruleset: { .mixin() { color:blue; }};// call detached ruleset.caller { @detached-ruleset(); .mixin();}
复制代码
定义规则 mixin 能访问调用规则 mixin 同级变量
优先规则： 定义 rules 方法先获取 全局变量 再获取 局部变量
@detached-ruleset: { height: @caller-variable; .caller-mixin();};
.a { @detached-ruleset();
// define variable and mixin needed inside the detached ruleset @caller-variable: 100px; .caller-mixin() { width: 100px; }}@caller-variable: 200px;
复制代码
6.复制 rules 不能访问另外一个作用域
能访问到另外的作用域，只有在定义规则，或者在调用规则可以访问新作用域，但是如果将一个规则赋值到另外的规则的时候就不能访问另外的作用域，这里会报错
@detached-1: { scope-detached: @one @two; };.one { @one: visible; .two { @detached-2: @detached-1; @two: visible; // ruleset can not see this variable }}
.use-place { .one > .two(); @detached-2();}
复制代码
分离规则
// 通过namespace定义规则#space { .importer-1() { @detached: { width: @variable; }; }}// 定义规则.importer-2() { @variable: 10px; #space > .importer-1(); }
.use-place { // 通过访问规则importer-2，并且获取到#space下的importer-1规则 .importer-2(); // 最后可以直接调用到#space下的importer-1规则 @detached();}
复制代码
六、增加 Minx 判断条件
相当于在原来定义变量的基础上，增加了 If-else 的写法，让 css 更灵活
初始>, >=, =, =<, <
// 编译前// if条件1： lightness>50% .mixin (@a) when (lightness(@a) >= 50%) { background-color: black;}// elseif条件2: lightness(@a) < 50%.mixin (@a) when (lightness(@a) < 50%) { background-color: white;}// 通用条件.mixin (@a) { color: @a;}// 调用.class1 { .mixin(#ddd) }.class2 { .mixin(#555)
// 编译后.class1 { background-color: black; color: #ddd;}.class2 { background-color: white; color: #555;}
复制代码
true 关键字
// 编译前.truth (@a) when (@a) { }.truth (@a) when (@a = true) { width: 100px}.class { .truth(true);}
// 编译后.class { width: 100px; }
复制代码
多个参数比较
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }.mixin (@a) when (@media = desktop) { ... }
.max (@a; @b) when (@a > @b) { width: @a }.max (@a; @b) when (@a < @b) { width: @b }
复制代码
并且(and) 和 或(,) 和 非(not)
// 并且 两个条件.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
// 或者 用逗号分隔.mixin (@a) when (@a > 10), (@a < -10) { ... }
// 非，not 排除.mixin (@b) when not (@b > 0) { ... }
复制代码
通用判段类型方法
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }.mixin (@a; @b: black) when (iscolor(@b)) { ... }
iscolor // 是否颜色类型isnumber // 是否数字类型isstring // 是否字符串类型iskeyword // 是否是css的关键字isurl // 是否是url链接ispixel // 是否是带pxispercentage // 是否是带%isem // 是否em单位isunit // 是否有单位
复制代码
通过默认 mixin 判断
.mixin (@a) when (@a > 0) { ... }.mixin (@a) when (default()) { ... }
复制代码
评论