LESS的使用

CSS的缺陷

在开发过程中CSS有许多不方便之处，例如不支持加减乘除运算，各种选择器之间的嵌套关系不明显等，不利于后期维护。

less简介

Less 是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。less文件最终可以编译成为css文件。

less基本使用

使用vscode开发的话，只需要安装easyless插件即可，安装好插件后ctrl+s保存写好的les文件后就会生成编译好的css文件，然后直接在html页面中通过<link>标签引入即可。less中保留了大部分css的语法，并额外对CSS功能进行了拓展，各种类选择器，标签选择器等都和css中用法一样，但是一些伪类选择器语法有所改变。

四则运算

CSS中并不支持运算操作，在开发过程中也会带来一定的麻烦，但是less中允许进行四则运算，最后的运算结果写入编译好的CSS文件。

less代码

//less代码
.box {
    // 加运算
    width: 100px + 5;
    // 减运算
    height: 100px - 5;
    // 乘运算
    font-size: 20px * 5;
    // 除运算，除法运算必须用括号包起来，否则会编译失败
    margin: (50px / 5);
}


//生成的css代码

.box {
  /* 100+5 */
  width: 105px;
  /* 100-5 */
  height: 95px;
  /* 20*5 */
  font-size: 100px;
  /* 50/5 */
  margin: 10px;
}

但是四则运算中两个运算数都会有单位的困扰，为此less中这样规定：

• 如果两个运算数都没有单位，则结果也没有单位
• 如果两个运算数只有一个数有单位，则运算结果的单位为该单位
• 如果两个运算数都有单位，运算结果的单位为前面的数的单位

//less代码
.btn {
    width: 100 + 5;
    height: 100px + 5;
    font-size: 100 + 5px;
    margin: 100rem + 5px;
}


//生成的css代码
.btn {
  width: 105;
  height: 105px;
  font-size: 105px;
  margin: 105rem;
}

自定义变量

less中允许我们定义变量，可以统一使用该变量，也方便后期修改。这里变量的使用和修改和其他高级语言一样，定义变量赋值后，在后面的语句中直接使用即可，而且自定义的变量也可直接参与运算。

定义变量：@变量名: 值;

使用变量：CSS属性：@变量名;

//less代码
//变量定义
@num: 100px;

.abc {
    width: @num; //使用变量
    height: @num * 5;//变量也可参与运算
}


//生成的css代码
.abc {
  width: 100px;
  height: 500px;
}

嵌套

css中如果想选中 div 中的 span标签必须要写成div span，这样显然不利于观察父子级关系，less中允许父子级关系的嵌套，子标签的选择器直接写在父选择器的大括号里，即

div {

 span {

 }

}

//html代码
<div class="a">
    <div class="b"> </div>
</div>


//less代码
.a {
    width: 200px;
    height: 200px;

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


//生成的css代码
.a {
  width: 200px;
  height: 200px;
}
.a .b {
  width: 100px;
  height: 100px;
}

如果碰到该标签的伪类选择器或者伪元素选择器等，要在前面加上$符号用以标记区分。

没加上$的会被识别为该父选择器的后代。

加上$后，就会被解析为父选择器本身或者夫选择器的伪类。

//less代码
.x {
    
    .y {
        width: 100px;
    }

    &:hover {
        background-color: pink;
    }

    &::after {
        height: 200px;
        width: 200px;
    }
}




//css代码
.x .y {
  width: 100px;
}
.x:hover {
  background-color: pink;
}
.x::after {
  height: 200px;
  width: 200px;
}