携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

👨‍🎓作者：Java学术趴

🏦仓库：Github、Gitee

✏️博客：CSDN、掘金、InfoQ、云+社区

💌公众号：Java学术趴

🚫特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系小编授权。

🙏版权声明：文章里的部分文字或者图片来自于互联网以及百度百科，如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。

☠️每日毒鸡汤：这个社会是存在不公平的，不要抱怨，因为没有用！人总是在反省中进步的！

less语法

1 less语法

1.1 less中的变量

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

• 作为普通属性值来使用：直接使用@pink

// 定义属性值变量，定义变量的时候必须以分号结束，否则找不到该变量
@color:pink;
.myDiv {
  color: @color;
}

• 作为选择器和属性名：#@{selector的值}的形式

// 定义属性名的变量
@m:margin;
.myDiv {
  @{m}: 10px;
}
​
// 定义标签选择器的变量
@selector:warp;
#@{selector} {
  @{m}: 10px;
}
​
.@{selector} {
  @{m}: 10px;
}

• 作为URL：@{url}

• 变量的延迟加载 : less中的变量都是延迟加载的。

// 变量的延迟加载
@var: 0;
.class {
  @var: 1;
    .brass {
      @var: 2;
      // 如果是顺序执行的，那么此时 size 的值应该是2
      // 但是在less中存在变量的延迟加载，变量的赋值会等作用域中所有的数据加载完毕才会赋值
      // 所以此时这个值就是 3
      size: @var; // 3
      @var: 3;
    }
  size: @var;
}

1.2 less的嵌套规则

// less中的嵌套规则
.myDiv {
  margin: 10px;
  background-color: pink;
  // 基本嵌套，直接在一个标签选择器中嵌套一个新的标签选择器即可
  .myDiv2 {
    margin: 20px;
    background-color: yellow;
    // 不进行嵌套，同级使用，需要使用 & 符号，代表和的意思
    &:hover{
      background-color: aqua;
    }
  }
}

1.3 less的混合

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

1.3.1 普通混合

• 普通混合 : 混合会被编译到css文件中

// less混合的基本使用
// 当两个HTML元素中存在多个一致的元素的时候
// 此时就可以定义一个样式规则提供给他们两个使用
// 此时这个混合会被编译到css文件中
.guize {
  background-color: pink;
  font-size: 10px;
  margin: 10px;
}
​
#myDiv {
  .divOne {
    .guize;
  }
  .divTwo {
    .guize;
  }
}

1.3.2 不带输出的混合

• 不带输出的混合：混合不会编译到css文件中

// 给混合加上小括号之后，这个混合就不会被编译到css文件中
.guize() {
  background-color: pink;
  font-size: 10px;
  margin: 10px;
}
​
#myDiv {
  .divOne {
    .guize();
  }
  .divTwo {
    .guize();
  }
}

1.3.3 带参数的混合

• 带参数的混合 : 可以给混合传递变量，并且不会输出到css文件中

// less可以动态的传递参数
.guize(@w,@h,@c) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
    .guize(10px,10px,pink)
  }
  .divTwo {
    .guize(20px,20px,yellow)
  }
}
​

1.3.4 带参数并且存在默认值的混合

• 带参数并且存在默认值的混合：如果不给定实参，那么就会使用默认值，给定实参之后会覆盖默认值。

// less可以动态的传递参数
.guize(@w:10px,@h:10px,@c:pink) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
     // 上边给了默认值这里不给值会使用默认值
    .guize()
  }
  .divTwo {
    // 如果给定了新的实参值，那么会覆盖默认的
    .guize(20px,20px,yellow)
  }
}

1.3.4 命名参数

• 命名参数：指定实参给哪个形参进行赋值，解决当实参和形参的个数不一致的问题。

// less可以动态的传递参数
.guize(@w:10px,@h:10px,@c:pink) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
     // 上边给了默认值这里不给值会使用默认值
    .guize()
  }
  .divTwo {
    // 如果这里的实参只给定一个，那么他会按照顺序进行赋值，也就是把yellow赋值给@w变量
    // 但是我们想把这个颜色赋值给最后的 @c , 所以我们此时使用命名参数
    // 使用命名参数指定将 yellow 赋值给哪个变量
    .guize(@c:yellow)
  }
}