目录

一、初识Less

二、Less的语法

1.注释

2.变量

3.父元素

4.扩展

5.混合函数

6.less中的运算

7.引入less文件

一、初识Less

        less是一门CSS预处理语言

        less是一个CSS的增强版，通过less可以编写更少的代码实现更强大的样式

        在less中添加了许多新的特性，像对变量的支持、对mixin的支持...

        less的语法大体上和css一致，但是less中添加了许多对css的扩展， 所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后由浏览器执行

二、Less的语法

1.注释

Less中的注释以 // 开头，是单行注释

//less中的单行注释，注释中的内容不会被解析到css中

2.变量

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

        变量的语法：@变量名

 作为变量名时，如果是直接使用，则以 @变量名 的形式使用即可

.box4{
    width: @a;
    height: @a;
    background-color: @b;
}

作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用

.@{c}{
    width: @a;
    height: @a;
    background-image: url("@{c}/1.png");
}

        变量发生重名时，会优先使用比较近的变量

        可以在变量声明前就使用变量

@d:200px;
@d:300px;
div{
    // 变量发生重名时，会优先使用比较近的变量
    @d:120px;
    width: @d;
    height: @e;
}
// 可以在变量声明前就使用变量
@e:300px;

div{
    width: 300px;
    height: $width;
}

  3.父元素

        父元素中可以嵌套子元素，&符号表示外层的父元素

.box1 {
    .box2 {
        color: red;
    }
    >.box3 {
        color: red;
    }
    // 为box1设置一个hover
    //&表示外层的父元素
    &:hover {
        color: orange;
    }
    div & {
        width: 30px;
    }
}

编译后的CSS文件如下：

  4.扩展

        extend()对当前选择器扩展指定选择器的样式（选择器分组）

.p1 {
    width: 100px;
}
.p2:extend(.p1) {
    height: 20px;
}

编译后的CSS文件如下：

        直接对指定的样式进行引用，这里就相对于将p1的样式在这里进行了复制（mixin 混合）

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

编译后的CSS文件如下：

使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins

.p4(){
    width: 400px;
    height: 400px;
    background-color: orange;
}
.p5{
    .p4();
}

编译后的CSS文件如下：

  5.混合函数

        混合函数 在混合函数中可以直接设置变量，调用混合函数时，需要按顺序传递参数，也可以使用键值对不按照顺序传递参数。

.test(@w,@h,@bg-color){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}
div{
    .test(200px,200px,red)
    // .test(@bg-color:red,@w:200px,@h200px,)
}

编译后的CSS文件如下：

 调用混合函数时也可以不传参数，但是必须要在混合函数中设置默认值，如下：

  6.less中的运算

        在less中所有的数值可以直接进行运算（加减乘除运算）

.box1{
    width: 100px + 100px;
    height: 100px*2;
    background-color: red;
}

编译后的CSS文件如下：

  7.引入less文件

        可以通过 import 来将其他的less引入到当前的less

@import "syntax.less";