less基础

一. 使用less的必要性

css的缺点：

1. 代码间没有逻辑性，冗余度较高
2. 不方便维护 拓展 复用
3. 计算能力差（CSS3有计算能力）
4. 如果没有一定经验，很难编写良好的CSS代码项目

less作为一门CSS拓展语言，有效的改良了这些缺点

二. less基础

less是什么？

less是一门CSS拓展语言，也叫CSS预处理语言

less在CSS现有语法上添加了一些程序语言的特性：

1. 变量
2. 运算
3. 函数
4. 代码嵌套

Less中文网址： lesscss.cn

less安装：

1. 使用vscode无需安装less
2. 使用npm i less -g安装less
3. 使用lessc -v查看less版本

三. less使用

3.1 less变量

定义变量格式：

@variable:10;
@color:black;
@size:100px;

变量命名规范

1. 必须使用@作为前缀
2. 不能包含特殊字符
3. 不以数字开头
4. 大小写敏感

使用变量

//直接使用
body {
    color:@color;
}

3.2 less编译

浏览器无法直接解析less，所以less最终要编译为css才能被html引入

less编译vscode插件 --easy less

安装插件，重启vscode，之后每次保存less文件都会自动编译生成css文件

3.3 less嵌套

css内部的嵌套：

.parentbox .childbox1{
    css code
}
.parentbox .childbox2{
    css code
}

less内部嵌套：

.parentbox {
    .childbox1 {
        css code
    }
    .childbox2 {
        css code
    }
}

显而易见，使用less之后，代码的逻辑性和可维护性都变得更好

3.4 less运算

任何数字颜色和变量都能参与运算，less提供了基本四则运算

@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}

1. 我们运算符的左右两侧必须敲一个空格隔开
2. 两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准