CSS预处理器——less

介绍

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。下面我们正式学习以下less

使用

嵌套

对于所有的CSS预处理语言来说，大家最常见到也肯定会用到的特性就是嵌套了。嵌套规则允许在一个选择器中嵌套另一个选择器，这更容易设计出精简的代码，并且样式之间的关系一目了然。
如：

.parent {
  width: 100px;
  height: 100px;
  .child1 {
    width: 50%;
  }
}

经过less编译后

.parent {
  width: 100px;
  height: 100px;
}
.parent .child1 {
  width: 50%;
}

less嵌套还支持各种类型的选择器，比如子代、伪类、联合等。如：

.parent {
  width: 100px;
  height: 100px;
  &.parent1 {
    color: red
  }
  &::after {
    position: absolute;
  }
  > child2 {
    width: 20px;
  }
  .child1 {
    width: 50%;
  }
  >div {
    width: 100%;
    &:nth-child(2) {
      width: 20px;
    }
  }
}

经过less编译后会得到下面的代码

.parent {
  width: 100px;
  height: 100px;
}
.parent.parent1 {
  color: red;
}
.parent::after {
  position: absolute;
}
.parent > child2 {
  width: 20px;
}
.parent .child1 {
  width: 50%;
}
.parent > div {
  width: 100%;
}
.parent > div:nth-child(2) {
  width: 20px;
}

变量

在css中我们会在很多地方用到同一个值，这样很不利于维护。所以在less中加入了变量的特性。在less中，变量非常强大，选择器、属性、属性值都可以通过变量来定义。在less中，变量是常量，只能定义一次
在less中，用@开头定义变量，使用变量是也是用@开头。

• 值变量

@color: #123456;

.wrap {
  background: @color;
  .child {
    color: @color;
  }
}

• 选择器变量，将选择器变成动态的

@class: myclass;

.@{class} {
  width: 100px;
}

• 属性变量

@propname: border;
.wrap {
  @{propname}: 1px solid red;
}

• url变量，less中的变量还可以在字符串中使用，达到字符串拼接的效果，这时候变量需要加双引号

@folderUrl: "../images";

.wrap {
  background: url("@{folderUrl}/test.png")
}

mixin

mixin是less中提高代码复用性的一种手段
简单使用

.border-1px {
  border: 1px solid red
}

.wrap {
  .border-1px
}

经过less编译后

.border-1px {
  border: 1px solid red;
}
.wrap {
  border: 1px solid red;
}

调用mixin由两种方法:

.border-1px()
.border-1px

如果想要定义的mixin不编译成css，可以使用()来实现

.border-1px {
  border: 1px solid red
}
.border-2px() {
  border: 2xp solid red;
}
.wrap {
  .border-1px
  .inner {
    .border-2px()
  }
}

编译后:

.border-1px {
  border: 1px solid red;
}
.wrap .border-1px .inner {
  border: 2xp solid red;
}

• 参数和默认参数

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

/*less*/
.black-border(@width: 1px) {
  border: @width solid black;
}

.wrap {
  .black-border();
  .inner {
    .black-border(2px)
  }
}

/*编译后的css*/
.wrap {
  border: 1px solid black;
}
.wrap .inner {
  border: 2px solid black;
}

• 方法的匹配模式
  与 面向对象中的多态类似

.triangle(top,@width:20px,@color:#000){
  border-color:transparent  transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
  border-color:transparent @color transparent  transparent ;
}

.triangle(bottom,@width:20px,@color:#000){
  border-color:@color transparent  transparent  transparent ;
}
.triangle(left,@width:20px,@color:#000){
  border-color:transparent  transparent  transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
  border-style: solid;
  border-width: @width;
}
#main{
  .triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
  border-color:transparent  transparent  transparent #999;
  border-style: solid;
  border-width: 50px;
}

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

• 使用条件判断
  less中没有if-else，但是又when，使用类似if-else

.border(@width, @color) when (@width>3px) and (@color=red) {
  border: @width solid @color;
}

.main {
  .border(4px, red)
}

/*编译后的css*/
.main {
  border: 4px solid red;
}

• 循环
  less并没有提供循环的使用方法，但我们可以使用递归来模拟实现循环

/* Less */
 .generate-columns(4);

 .generate-columns(@n, @i: 1) when (@i =< @n) {
   .column-@{i} {
     width: (@i * 100% / @n);
   }
   .generate-columns(@n, (@i + 1));
 }
 /* 生成后的 CSS */
 .column-1 {
   width: 25%;
 }
 .column-2 {
   width: 50%;
 }
 .column-3 {
   width: 75%;
 }
 .column-4 {
   width: 100%;
 }

继承

extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。
extend 关键字的使用

.animation{
  transition: all .3s ease-out;
  .hide{
    transform:scale(0);
  }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

编译后的css

.animation,
#main {
  transition: all 0.3s ease-out;
}
.animation .hide,
#con {
  transform: scale(0);
}

从上面可以看出，#main继承了.animation的样式，而#con继承了.animation .hide的样式

• 使用all全局搜索替换

#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

编译后的css

#main,
#wrap {
  width: 200px;
}
#main:after,
#wrap:after {
  content: "Less is good!";
}

#wrap把#main所有的样式都继承了

导入

less一个重大的功能就是导入，我们可以把一些公共样式或者常量写入一个单独的less文件中，然后通过导入来引入其他less。
比如，我们把一些常用的变量放在一个less文件中

/*var.less*/
@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(99, 137, 185);
@primaryTextColor: #646464;
@secondaryTextColor: #000;
@dividerColor: #b6b6b6;
@borderColor: #dadada;

然后在其他文件中引入这个less

import "var"; 
//等价于
import "var.less";

• once和multiple
  once 表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。是less的默认行为
  使用@import (multiple)允许导入多个同名文件

@import (once) "var.less";
@import (once) "var.less"; // 会被忽略

/* Less */
   
// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
   
/* 生成后的 CSS */
.a {
  color: green;
}
.a {
  color: green;
}

函数

less有许多内置函数，大家可以去官网直接学习less函数

结束语

less还有许多有趣的用法，在这里就不一一列举了，大家可以去less的官网好好学习以下，学会css预处理器的使用，可以让我们在开发中更加得心应手有更高的开发效率