持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天

Less基础

维护CSS的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
不方便维护及扩展，不利于复用
CSS没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

Less介绍

Less(Leaner Style Sheets) 是一门CSS扩展语言，也称为CSS预处理器

作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS的语法基础之上，引入了变量，Minxin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

Less中文网站

常见的CSS预处理器：Sass、Less、Stylus

Less安装

安装nodejs
检查是否安装成功：node -v
基于nodejs在线安装Less：npm install -g less
检查是否安装成功：lessc -v

Less使用

新建一个后缀名为less的文件，在这个文件里面书写less语句

Less变量

变量是指没有固定的值，可以改变的。在CSS中的一些颜色和数值等经常使用

//例:
@color:pink;
@font14:14px;
body{
    background-color:@color
    font-size:@font14;
}

变量命名规范：

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

Less嵌套

//例:
.header{
    width: 200px;
    //子元素的样式直接写到父元素里面
    a{
        color:red;
        //伪类选择器、交集选择器、伪元素选择器要在内层选择器的前面加&
        &:hover{
            color:blue;
        }
        &::before{
            content:"";
        }
        }
}

Less运算

任何数字、颜色或者变量都可以参与运算，就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算

注意：

运算符中间两个左右有空格隔开
对于两个不同单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
除法需要用括号，否则不生效
需要百分比单位就在后面乘以100%

Less导入

将common.less引入到index.less里面语法如下：

@import "common";

Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件

所以，我们需要把我们的Less文件编译成CSS文件，这样我们的html页面才能使用

vscode Less插件

Easy LESS插件用来把Less文件编译为CSS文件

Less基础笔记