Less学习笔记
Less是一个css预处理器,Less文件后缀是.less。扩充了css语言,是css具备一定的逻辑性、计算能力。但是浏览器并不能识别Less代码,因此我们需要使用相应的vscode插件Easy LESS
用来保存less文件后自动生成对应的css文件。
1、运算
Less的运算支持加、减、乘、除,但是只有加、减、乘是可以直接书写计算表达式,除法需要添加小括号
.box{
width: 100 + 20px;
width: 100 - 20px;
width: 100 * 20px;
width: (100 / 20px); //推荐
width: 100 ./ 20px;
}
如果表达式存在多个单位,以第一个单位为准。
2、嵌套
在Less中对于那些存在父子关系的盒子,我们可以通过嵌套的形式对样式进行编写修改,Easy LESS
插件可以帮我们直接转化。
.father{
color: red;
.son{
width: 100px;
.a{
color: green;
&:hover{
color: blue;
}
}
}
}
.father{
color: red;
}
.father .son{
width: 100px;
}
.father .son a{
color: green;
}
.father .son a:hover{
color: blue;
}
3、变量
我们在Less中也可以定义变量,用于存储一些会反复使用到的属性值,增加代码复用率。
//定义变量
@myColor: pink;
//使用变量
.box{
color: @myColor;
}
a{
color: @myColor;
}
4、导入
我们使用Less时,几个文件之间会存在公共的部分,我们可以把公共的部分提取成为一个单独的Less文件,然后其他文件需要使用时可以直接把该文件直接导入使用。
@import '文件路径'
5、导出
我们使用Less时,需要有一定要求的导出时我们就需要使用out
对导出Less文件进行相应的处理。
/*
这是将Less文件导入mycss文件夹内,并生成名称位index的css文件
*/
//out: ./mycss/index.css
6、禁止导出
对于一些公共使用的Less文件,我们会导入到需要的文件内,因此我们对于这部分的Less文件其实可以不用导出,这时候我们就需要把它禁止导出。
//out: false