你不知道的less

1.less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。

less既可以在客户端上运行，也可以借助Node.js在服务器上运行。

• less.bootcss.com/#%E6%A6%82%…

• less中文文档： lesscss.cn/

• less编译器工具： koala-app.com/

2.less的注释

• 以//开头的注释，不会被编译到css文件中
• 以/**/包裹的注释会被编译到css文件中

3. less中的变量

使用@来声明一个变量：@pink:pink;

1. 作为普通属性值来使用：直接使用@pink
2. 作为选择器和属性名：#@{selector的值}的形式
3. 作为URL：@{url}
4. 变量的延迟加载

@pink:pink;
@m:margin;
@selector:#wrapper;
div{
    @{m}:0; //作为属性名，要加@{变量名}
    color:@pink;//作为属性值，直接拿来使用  
}

@{selector}{  //作为选择器，@{变量名}
    width:200px;
    height:100px;
}

以下就是延迟加载：

@var:0;
.class{
    @var:1;
    .brass{
        @var:2;
        t:@var; //最后的值是3,也就是所谓的延迟加载
        @var:3;
    }
    t:@var;
}

编译成css文件

.class{
    t:1;
}
.class .brass{
    t:3;
}

4. less的作用域

使用less定义的变量都是块级作用域

5. less中的嵌套规则

1. 基本嵌套规则
2. &的使用 【&表示当前选择器的父级】

基本嵌套规则

/* css的写法 */
.father .son{
    
}

/* less的写法 */
.father{
    .son{
        
    }
}

&的使用

//less写法
.father{
    .son{
        &:hover{
            background:red;
        }
    }
}

//被编译成css文件的写法
.father .son:hover{
    background:red;
}

6. less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式。

1. 普通混合
2. 不带输出的混合
3. 带参数的混合
4. 带参数并且有默认值的混合
5. 带多个参数的混合
6. 命名参数
7. 匹配模式
8. arguments变量

6.1 普通混合

选择器后面定义一些样式

引用重复规则：选择器名() 或 选择器名

*{
  margin: 0;
  padding: 0;
}
.fc{
  display: flex;
  justify-content: center;
  align-items: center;
}
.father {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  .fc(); //引用.fc类的规则
  .children{
    width: 100px;
    height: 100px;
    background-color: red;
    .fc()//引用.fc类的规则
  }
}

转化为css形式：

* {
  margin: 0;
  padding: 0;
}
.fc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.father {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.father .children {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

6.2 不带输出的混合

就是在定义的选择器后面加 ()

如果不想要.fc那么一串的代码块出现，则可以改成:.fc(){}定义一些可复用的属性

//less代码
*{
  margin: 0;
  padding: 0;
}
.fc(){
  display: flex;
  justify-content: center;
  align-items: center;
}
.father {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  .fc; //引用.fc类的规则
  .children{
    width: 100px;
    height: 100px;
    background-color: red;
    .fc;//引用.fc类的规则
  }
}

编译转化成css代码：

* {
  margin: 0;
  padding: 0;
}
.father {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.father .children {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

6.3 带参数的混合

带参数的混合有点类似函数，需要向这个混合传参，实现自定义化

//less代码
*{
  margin: 0;
  padding: 0;
}
.fc(){
  display: flex;
  justify-content: center;
  align-items: center;
}
.c(@w,@h,@color){ //带参数的混合
  width: @w;
  height: @h;
  background: @color;
}
.father {
  .c(400px,400px,lightgreen); //使用带参数的混合
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  .fc; //引用.fc类的规则
  .children{
     .c(100px,100px,pink);//使用带参数的混合
    .fc;//引用.fc类的规则
  }
}

/* 将以上less编译的css代码 */
* {
  margin: 0;
  padding: 0;
}
.father {
  width: 400px;
  height: 400px;
  background: lightgreen;
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.father .children {
  width: 100px;
  height: 100px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

6.4 带参数并且有默认值的混合

//less代码
*{
  margin: 0;
  padding: 0;
}
.fc(){
  display: flex;
  justify-content: center;
  align-items: center;
}
.c(@w:10px,@h:10px,@color:red){ //带参数且有默认值的混合
  width: @w;
  height: @h;
  background: @color;
}
.father {
  .c(400px,400px,lightgreen); //使用带参数且有默认值的混合
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  .fc; //引用.fc类的规则
  .children{
     .c();//使用带参数且有默认值的混合
    .fc;//引用.fc类的规则
  }
}

/*上面的less代码编译生成的css代码*/
* {
  margin: 0;
  padding: 0;
}
.father {
  width: 400px;
  height: 400px;
  background: lightgreen;
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.father .children {
  width: 10px;
  height: 10px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

6.5 命名参数

命名参数指的是 在使用的时候指定具体形参的值

//less代码
*{
  margin: 0;
  padding: 0;
}
.fc(){
  display: flex;
  justify-content: center;
  align-items: center;
}
.c(@w:10px,@h:10px,@color:red){ //带参数且有默认值的混合
  width: @w;
  height: @h;
  background: @color;
}
.father {
  .c(400px,400px,lightgreen); //使用带参数且有默认值的混合
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  .fc; //引用.fc类的规则
  .children{
     .c(@color:black);//使用带参数且有默认值的混合,并且使用命名参数指定具体的形参的值
    .fc;//引用.fc类的规则
  }
}

/*上面的less代码编译生成的css代码*/
* {
  margin: 0;
  padding: 0;
}
.father {
  width: 400px;
  height: 400px;
  background: lightgreen;
  margin: 0 auto;
  border: 1px solid;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.father .children {
  width: 10px;
  height: 10px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

6.6 匹配模式

@_：表示通用的匹配模式，无论同名的哪个匹配模式被执行，都会先执行通用匹配模式中的代码

.选择器名(匹配标识符,变量...)

匹配标识符可以随便取，没有固定规范。要使用那个匹配模式的混合，就加对应的匹配标识符

//less代码
.triangle(@_,@w,@color){
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.triangle(T,@w,@color){
  border-width: @w;
  border-bottom-color: @color;
}
.triangle(B,@w,@color){
  border-width: @w;
  border-top-color: @color;
}
.triangle(L,@w,@color){
  border-width: @w;
  border-right-color: @color;
}
.triangle(R,@w,@color){
  border-width: @w;
  border-left-color: @color;
}

.wrap{
  .sjx {
    .triangle(T, 80px, green);
    
  }
}

/*最后编译出来的css代码*/
.wrap .sjx {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 80px;
  border-bottom-color: green;
}

6.7 @arguments变量（用法少）

arguments是实参列表，

//less代码
.border(@1,@2,@3){
  border: @arguments;
}
.box{
  width: 100px;
  height: 100px;
  .border(1px,solid,black)
}

/* 上面less代码编译生成的css代码*/
.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

7. less运算

在less可以进行加减乘除的运算，计算的结果以最左侧操作数的单位类型为准，如果最左侧操作数没有单位，则以其中一个最左侧有单位的为主。

乘法和除法 单位是不会转换的，除法运算要加一个 ()，否则不会进行计算，会原样输出

//less
.box{
  width: 50+100cm+10mm;
}

//编译生成的css代码
.box {
  width: 151cm;
}

//less代码
.box{
  height: 5cm*3mm;
  background-color: (#112233 / 2);
}
//编译生成的css代码
.box {
  height: 15cm;
  background-color: #09111a;
}

8. less继承

混合mixin有点类似ctrl+c和ctrl+v，并不会做一些优化

8.1 mixin混合

//less代码

*{
  margin: 0;
  padding: 0;
}
.juzhong(@w,@h,@c){
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: @w;
  height: @h;
  background-color: @c;
}


#wrap{
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
  .inner{
   
    &:nth-child(1){
      .juzhong(100px,100px,red);
    }
    &:nth-child(2){
      .juzhong(50px,50px,pink);
  }
}
}

/*以上less代码编译生成的css代码*/
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: red;
}
#wrap .inner:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: pink;
}

但是上面的css代码是可以优化的

#wrap .inner:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: red;
}
#wrap .inner:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: pink;
}


/*可以优化成下面这样的，但是mixin是做不到的*/
#wrap .inner:nth-child(1),#wrap .inner:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
#wrap .inner:nth-child(1){
  width: 100px;
  height: 100px;
  background-color: red;   
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background-color: pink;
}

8.2 extend继承

继承extends性能上比混合mixin高，灵活性没有混合强，不支持参数的形式

语法：要继承的选择器:extend(.类名)

要继承的这个类的所有属性 可以使用 要继承的选择器:extend(.类名 all )

//less代码
*{
  margin: 0;
  padding: 0;
}
.juzhong{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
#wrap{
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
  .inner:extend(.juzhong){
   
    &:nth-child(1){
      width: 100px;
      height: 100px;
      background-color: red;
    }
    &:nth-child(2){
     width: 50px;
     height: 50px;
     background-color: pink;
  }
}
}

/*以上代码编译生成的css代码*/
* {
  margin: 0;
  padding: 0;
}
.juzhong,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: red;
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background-color: pink;
}

8.3.1 all关键字

会继承当前类的所有有关特性

*{
  margin: 0;
  padding: 0;
}
.juzhong{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
#wrap{
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
  .inner:extend(.juzhong all){ //这里加了类关键字
    &:nth-child(1){
      width: 100px;
      height: 100px;
      background-color: red;
    }
    &:nth-child(2){
     width: 50px;
     height: 50px;
     background-color: pink;
  }
}
}

.juzhong:hover{ //类的特性
  background-color: lightgreen;
}

/*以上代码编译生成的css代码 */

* {
  margin: 0;
  padding: 0;
}
.juzhong,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: red;
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background-color: pink;
}
.juzhong:hover,
#wrap .inner:hover {
  background-color: lightgreen;
}

9. 避免编译

内容想要原封不动的保留下来

//语法：
~"内容"

//less代码
*{
  margin: 0;
  padding: ~"calc(100px + 100)";

}
//编译生成的css代码
* {
  margin: 0;
  padding: calc(100px + 100);
}