Less不可小觑

 

写在前面

 

CSS的短板

在语法更新时，每当新属性提出，浏览器的兼容问题就会成为一大烦恼。

 

Less的诞生

Less属于预编译脚本，一起被熟知的还有与Sass、Stylus。

Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

 

 

直接开干

变量

> 值变量

/* Less */
@color: #000;
#wrap {
  color: @color;
}

/* 生成后的 CSS */
#wrap {
  color: #000;
}

说明

以 @ 开头 定义变量，使用时 直接 键入 @名称。

在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。

 

> 选择器变量

/* Less */
  @mySelector: #wrap;
  @Wrap: wrap;
  @{mySelector} { // 变量名 必须使用大括号包裹
    color: #999;
    width: 50%;
  }
  #@{Wrap} {
    color: #666;
  }


  /* 生成的 CSS */
  #wrap {
    color: #999;
    width: 50%;
  }
  #wrap {
    color: #666;
  }

 

> 属性变量

/* Less */
  @borderStyle: border-style;
  @Soild: solid;
  #wrap {
    @{borderStyle}: @Soild;
  }


  /* 生成的 CSS */
  #wrap {
    border-style: solid;
  }

 

> url 变量

/* Less */
  @images: "xxx/xxx/img"; // 需加引号
  body {
    background: url("@{images}/dog.png");
  }


  /* 生成的 CSS */
  body {
    background: url("../img/dog.png");
  }

 

> 声明变量

 /* Less */
  @background: {
    background: red;
  };

  @Rules: {
    width: 200px;
    height: 200px;
    border: solid 1px red;
  };

  #main {
    @Rules();
    @background();
  }


  /* 生成的 CSS */
  #main {
    width: 200px;
    height: 200px;
    border: solid 1px red;
    background: red;
  }

说明

将可复用的样式最小单元化、模块化，减少代码量。

 

> 变量运算

/* Less */
  @width: 300px;
  @color: #222;
  #wrap {
    width: @width-20;
    height: @width-20 * 5;
    color: @color * 2;
  }


  /* 生成的 CSS */
  #wrap {
    width: 280px;
    height: 200px;
    color: #444;
  }

说明

• 加减法时，以第一个变量为基准；
• 乘除法时，单位要统一。

 

> 变量作用域

/* Less */
  @var: @a;
  @a: 100%;
  #wrap {
    width: @var;
    @a: 9%;
  }


  /* 生成的 CSS */
  #wrap {
    width: 9%;
  }

说明

由于less的就近原则，@a 被新的覆盖了。

 

> 用变量去定义变量

/* Less */
  @text: "I am fnord.";
  @var: "text";
  #wrap {
    &:after {
      content: @@var;
  }


  /* 生成的 CSS */
  #wrap::after {
    content: "I am fnord.";
  }

说明

由于 @var 的变量值与 @text重名，@var 等同于 @text

 

 

嵌套

> &符

/* Less */
  #header {
    font-weight: bold;
    &_content {
      margin: 20px;
    }
  }


  /* 生成的 CSS */
  #header {
    font-weight: bold;
  }

  #header_content {
    margin: 20px;
  }

 

> 设置默认参数

/* Less */
  .border(@a: 10px, @b: 50px, @c: 30px, @color: #000) {
    border: solid 1px @color;
    box-shadow: @arguments; // 指代的是 全部参数
  }

  #main {
    .border(0px, 5px, 30px, red);
  }

  #content {
    .border; // 等价于 .border()
  }


  /* 生成的 CSS */
  #main {
      border: solid 1px red;
      box-shadow: 0px,5px,30px,red;
  }

  #wrap {
      border: solid 1px #000;
      box-shadow: 0px 50px 30px #000;
  }

  #content {
      border: solid 1px #000;
      box-shadow: 10px 50px 30px #000;
  }

说明

• Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。
• @arguments 犹如 JS 中的 arguments 指代的是 全部参数。
• 传的参数中 必须带着单位。

 

 

方法的匹配模式

/* Less */
  .borderStyle(left, @width: 20px, @color: #000) {
    border-color: transparent transparent transparent @color;
  }

  .borderStyle(@_, @width: 20px, @color: #000) {
    border-style: solid;
    border-width: @width;
  }

  #main {
    .borderStyle(left, 50px, #999);
  }


  /* 生成的 CSS */
  #main {
    border-color: transparent transparent transparent #999;
    border-style: solid;
    border-width: 50px;
  } 

说明

与 面向对象中的 多态 很相似。

第一个参数 left 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。

 

 

运算符

/* Less */
  #card {
    /* and 运算符 ，相当于 &&，必须条件全部符合才会执行 */
    .border(@width, @color, @style) when (@width > 100px) and(@color = #999) {
      border: @style @color @width;
    }

    /* not 运算符，相当于 非运算 !，条件为 不符合才会执行 */
    .background(@color) when not (@color >= #222) {
      background: @color;
    }

    /* , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行 */
    .font(@size: 20px) when (@size > 50px), (@size < 100px) {
      font-size: @size;
    }
   }

   #main {
      #card > .border(200px, #999, solid);
      #card .background(#111);
      #card > .font(40px);
   }


    /* 生成后的 CSS */
    #main {
      border: solid #999 200px;
      background: #111;
      font-size: 40px;
    }

 

/* Less */
  .boxShadow(...) {
      box-shadow: @arguments;
  }

  .textShadow(@a, ...) {
      text-shadow: @arguments;
  }
  #main {
      .boxShadow(1px, 4px, 30px, red);
      .textShadow(1px, 4px, 30px, red);
  } 


  /* 生成后的 CSS */
  #main {
    box-shadow: 1px 4px 30px red;
    text-shadow: 1px 4px 30px red;
  }

说明

对于数量不定的参数：

如果希望方法接受数量不定的参数，可以使用... ，犹如 ES6 的扩展运算符。

 

 

方法使用important！

/* Less */
  .border {
    border: solid 1px red;
  }

  #main {
    .border() !important;
  }


  /* 生成后的 CSS */
  #main {
    border: solid 1px red !important;
  }

 

 

循环方法

 /* Less */
  .style-columns(2);
  .style-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
      width: (@i * 100% / @n);
    }
    .style-columns(@n, (@i + 1));
  }


  /* 生成后的 CSS */
  .column-1 {
    width: 25%;
  }
  .column-2 {
    width: 50%;
  }

 

@color: {
  activity: #ed7f8b;
  seminars: @theme-color;
  course: #ffa757;
};

/** 遍历变量 @color */
each(@color, {
  .@{key} {
    .tag-wrap {
      color: @value;
    }

    .content-wrap {
      &:before {
      /** @{key} 需加花括号 */
        background: url('@assets/image/teaching-calendar/card-bg-@{key}@2x.png');
      }
    }
  }
});

说明

对于循环，也可以用 each 去遍历，使用@key、@value时，记得有时需要加花括号。

 

 

写在结尾

less的方法还有很多，属性拼接、继承等等，可以带来很便捷的样式交互开发，时间有限，暂举例这么多，一起探索吧