less学习

一、less 简介

less是一门css的预处理语言

• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
• 在less中添加了许多的新特性：像对变量的支持、对mixin的支持…
• less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

二、less 语法

2.1 less注释

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

2.2 父子关系嵌套

在less中，父子关系可以直接嵌套

.box1 {
  background-color: #bfa;

  .box2 {
    background-color: red;

    &:hover {
      background: aqua;
    }
  }
}

加了&后就不会将后面的内容当做下一层去编译

对应的css:

.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: red;
}
.box1 .box2:hover {
  background: aqua;
}

2.3 变量

在变量中可以存储一个任意的值，并且我们可以在需要时，任意的修改变量中的值

变量的语法：@变量名

• 直接使用使用变量时，则以@变量名的形式使用即可
• 作为类名、属性名或者一部分值使用时，必须以@{变量名}的形式使用
• 可以在变量声明前就使用变量（可以但不建议）

@b1:box1;
@b2:box2;
@b3:box3;
@size:200px;
@bc:background-color;
@bi:background-image;
@color:red;
@path:"image/a/b/c";

.@{b1}{
  width: @size;
  height: $width;
    @{bc}: @color;
    @{bi}: url("@{path}/1.png");
}

.@{b2}{
  width: @size;
  height: $width;
    @{bc}: @color;
    @{bi}: url("@{path}/2.png");
}

.@{b3}{
  width: @size;
  height: $width;
    @{bc}: @color;
    @{bi}: url("@{path}/3.png");
}

对应的css:

.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image/a/b/c/1.png");
}
.box2 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image/a/b/c/2.png");
}
.box3 {
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image/a/b/c/3.png");
}

2.4 其他

div {
  //& 拼接
  &:hover {
    background-color: blue;
  }
}

.p1{
  width: 100px;
  height: 100px;
}

//:extend()对当前选择器扩展器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){
  color: red;
}

.p3{
  //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
  //mixin混合
  .p1();
  color: blue;
}

//使用类选择器时可以在选择器后添加一个括号，这时我们实际上就创建了一个mixins
.p4(){
  width: 100px;
  height: 100px;
}

对应的css:

div:hover {
  background-color: blue;
}
.p1,
.p2 {
  width: 100px;
  height: 100px;
}
.p2 {
  color: red;
}
.p3 {
  width: 100px;
  height: 100px;
  color: blue;
}

2.5 混合函数

在混合函数中可以直接设置变量，并且可以指定默认值

.test(@w:200px, @h:100px, @bc:red){
  width: @w;
  height: @h;
  background-color: @bc;
}

.p6{
  // .test(200px, 100px, red); // 对应参数位传值
  // .test(@h:200px,@w:100px,@bc:red); // 写明对应属性，可变换顺序
  // .test();
  .test(300px);
}

对应的css:

.p6 {
  width: 300px;
  height: 100px;
  background-color: red;
}

average混合函数

.h1{
  color:average(red,yellow);
}

对应的css:

.h1 {
  color: #ff8000;
}

darken混合函数

body{
    background-color: darken(#bfa, 50%);
}

对应的css:

body{
    background-color: #22aa00;
}

三、补充

创建all.less文件，将我们之前编写的less文件通过@import引入进来，可以通过import来将其他的less引入到当前的less中

@import "style.less";
@import "syntax.less";

查看生成的all.css代码，会发现其他的内容囊括了两个less文件的内容，所以，我们可以利用@import来对less文件进行整合，然后引入生成的css文件使用即可。这样，每次修改的时候直接对某个模块的less文件进行修改，就会非常简单

如果我们观察过之前fontawesome源码文件，会发现其中也有less代码文件