LESS详解之混合(Mixins)高级

现在已经为大家介绍了LESS之混合(Mixins)的一些用法了,相信大家也用了不少有关LESS之混合(Mixins)了。接下来将为大家介绍一些有关LESS之混合(Mixins)的另外一些使用方法,可算是比较难理解的,所以把它们放到了LESS详解之混合(Mixins)高级来为大家介绍,希望能个能对大家有所帮助。

 

  高级参数用法

 

如果需要在 mixin 中不限制参数的数量,可以在变量名后添加“…”,表示这里可以使用 N 个参数。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. /*接受 0-N 个参数*/
  2. .mixin1 (…) {
  3.     padding:@arguments;
  4. }
  5. div {
  6.     .mixin1(20px);
  7.     div {
  8.         .mixin1(20px 30px);
  9.         div {
  10.             .mixin1(20px 50px 203px);
  11.             div {
  12.                 .mixin1(20px 4px 4px 8px);
  13.             }
  14.         }
  15.     }
  16. }
  17. /*不接受任何参数*/
  18. .mixin2 () {
  19.     height : 131px;
  20. }
  21. span {
  22.     .mixin2;
  23. }
  24. /*接受 0-1 个参数*/
  25. .mixin3 (@a: #fff) {
  26.     color : @a;
  27. }
  28. h1 {
  29.     .mixin3;
  30.     h2 {
  31.         .mixin3(#eee);
  32.     }
  33. }
  34. /*接受 0-N 个参数*/
  35. .mixin4 (@a: 1, …) {
  36.     margin : @arguments;
  37. }
  38. a {
  39.     .mixin4;
  40.     span {
  41.         .mixin4(32%,223em,231px,111px);
  42.     }
  43. }
  44. /*接受 1-N 个参数*/
  45. .mixin5 (@a, …) {
  46.     margin : @arguments;
  47. }
  48. .meng {
  49.     .mixin5(90px);
  50.     span {
  51.         .mixin5(32%,223em,231px,111px);
  52.     }
  53. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. /*接受 0-N 个参数*/
  2. div {
  3.   padding: 20px;
  4. }
  5. div div {
  6.   padding: 20px 30px;
  7. }
  8. div div div {
  9.   padding: 20px 50px 203px;
  10. }
  11. div div div div {
  12.   padding: 20px 4px 4px 8px;
  13. }
  14. /*不接受任何参数*/
  15. span {
  16.   height: 131px;
  17. }
  18. /*接受 0-1 个参数*/h1 {
  19.   color: #ffffff;
  20. }
  21. h1 h2 {
  22.   color: #eeeeee;
  23. }
  24. /*接受 0-N 个参数*/a {
  25.   margin: 1;
  26. }
  27. a span {
  28.   margin: 32% 223em 231px 111px;
  29. }
  30. /*接受 1-N 个参数*/.meng {
  31.   margin: 90px;
  32. }
  33. .meng span {
  34.   margin: 32% 223em 231px 111px;
  35. }

 

  模式匹配与Guard表达式

 

LESS 提供了通过参数值控制 mixin 行为的功能。如果要根据 @switch 的值控制 .mixin 行为,只需按照下面的方法定义。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. .mixin (dark, @color) {
  2.     color: darken(@color, 10%);
  3. }
  4. .mixin (light, @color) {
  5.     color: lighten(@color, 10%);
  6. }
  7. .mixin (@_, @color) {
  8.     display: block;
  9. }
  10. @switch: light;
  11. .long {
  12.     .mixin(@switch, #888);
  13. }
  14. @switch2 : dark;
  15. .meng {
  16.     .mixin(@switch, #666);
  17. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. .long {
  2.   color: #a2a2a2;
  3.   display: block;
  4. }
  5. .meng {
  6.   color: #808080;
  7.   display: block;
  8. }

 

传给 .mixin 的颜色将执行 lighten 函数,如果 @switch 的值是 dark,那么则会执行 darken 函数输出颜色。

darken(@color, 10%)函数的意思是 亮度降低 10%。lighten(@color, 10%)函数的意思是 亮度增加 10%

以下是整个过程如何发生的:

第一个 .mixin 没有匹配,因为不满足 dark 条件;

第二个 .mixin 可以被匹配,因为它满足了 light 条件;

第三个 .mixin 也可以被匹配,因为它接受任何参数。

只有满足匹配要求的混合才会被使用。混合中的变量可以匹配任何值,非变量形式的值只有与传入的值完全相等时才可以匹配成功。

我们也可以根据参数的数量进行匹配,小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. .mixin (@a) {
  2.     color: @a;
  3. }
  4. .mixin (@a, @b) {
  5.     color: fade(@a, @b);
  6. }
  7. .meng {
  8.     .mixin(#000);
  9. }
  10. .long {
  11.     .mixin(#fff, 10%);
  12. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. .meng {
  2.   color: #000000;
  3. }
  4. .long {
  5.   color: rgba(255, 255, 255, 0.1);
  6. }

 

 

调用 .mixin 时,如果使用了一个参数,输出第一个 .mixin,使用了两个参数,则输出第二个。fade(@color, 10%)的意思是设定透明度为 10%。

 

  条件混合(guarded mixins)

 

与上面匹配值或者匹配参数数量的情况不同,Guards 被用来匹配表达式 (expressions)。如果你很熟悉编程函数的用法,那么很可能你已经掌握它的用法了。

为了尽可能地符合 CSS 的语言结构,LESS 选择使用 guard混合(guarded mixins)(类似于 @media 的工作方式)执行条件判断,而不是加入 if/else 声明。

       通过LESS自带的函数判断

 

LESS代码

[plain][/plain] view plaincopyprint?

  1. .mixin (@a) when (lightness(@a) >= 50%) {
  2.     background-color: black;
  3. }
  4. .mixin (@a) when (lightness(@a) < 50%) {
  5.     background-color: white;
  6. }
  7. .mixin (@a) {
  8.     color: @a;
  9. }
  10. .meng {
  11.     .mixin(#ddd);
  12. }
  13. .long {
  14.     .mixin(#555);
  15. }

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. .meng {
  2.   background-color: black;
  3.   color: #dddddd;
  4. }
  5. .long {
  6.   background-color: white;
  7.   color: #555555;
  8. }

 

  运算符判断

Guards 支持的运算符包括:> >= = =< <。说明一下,true关键字是唯一被判断为真的值,也就是这两个混合是相等的。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. @IE : true;
  2. @w : 10;
  3. .IE (@bTure) when (@bTure){
  4.     *display:block;
  5. }
  6. .IE1 (@bTure) when (@bTure){
  7.     *margin:0;
  8. }
  9. .IE2 (@bTure) when (@bTure >=0){
  10.     *padding:@bTure;
  11. }
  12. .IE3 (@bTure) when (@bTure >0){
  13.     *height:20px;
  14. }
  15. div {
  16.     .IE(@IE);
  17.     .IE1(@IE);
  18.     .IE2(@w);
  19.     .IE3(@w);
  20. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. div {
  2.   *display: block;
  3.   *margin: 0;
  4.   *padding: 10;
  5.   *height: 20px;
  6. }

 

  多个条件

 

多个Guards可以通过逗号表示分隔,如果其中任意一个结果为 true,则匹配成功。这个相当于脚本中的或的意思。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. @IE : true;
  2. @w : 10;
  3. .IE (@bTure, @b) when (@bTure), (@b < -10){
  4.     *display:block;
  5. }
  6. .IE1 (@bTure, @b) when (@bTure = false), (@b < -10){
  7.     *width:20px;
  8. }
  9. .IE2 (@bTure, @b) when (@bTure = true), (@b < -10){
  10.     *height:20px;
  11. }
  12. div {
  13.     .IE(@IE, @w);
  14.     .IE1(@IE, @w);
  15.     .IE2(@IE, @w);
  16. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. div {
  2.   *display: block;
  3.   *height: 20px;
  4. }

 

  参数之间比较

 

参数之值得注意的是不同的参数之间也可以比较,而参与比较的也可以一个参数都没有间判断。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. @h : 20;
  2. @w : 10;
  3. .mixin (@h, @w) when (@h < @w){
  4.     width:@h;
  5. }
  6. .mixin1 (@h, @w) when (@h > @w){
  7.     height:@w;
  8. }
  9. div {
  10.     .mixin(@h, @w);
  11.     .mixin1(@h, @w);
  12. }

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. div {
  2.   height: 10;
  3. }

 

  guard 中的and

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. @h : 20;
  2. @w : 10;
  3. @true : true;
  4. .mixin (@h, @w) when (@h > @w) and (@true) {
  5.     width:@h;
  6. }
  7. div {
  8.     .mixin(@h, @w);
  9. }

 

 

编译后的CSS代码

 

[css][/css] view plaincopyprint?

  1. div {
  2.   width: 20;
  3. }

 

 

  guard 中的not

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. @h : 20;
  2. .mixin (@h) when not(@h < 0) {
  3.     width:@h;
  4. }
  5. div {
  6.     .mixin(@h);
  7. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. div {
  2.   width: 20;
  3. }

 

 

 

上面就是今天为大家介绍的有关LESS详解之混合(Mixins)高级的相关内容,主要为大家介绍了高级参数用法、模式匹配与Guard表达式和条件混合(guarded mixins)。希望能为大家在LESS的学习道路上有所帮助。

标签