CSS预处理器-Less
less
认识
- Less是一个 CSS预处理器， Less文件后缀为.less
- 浏览器不识别less文件，所以在VScode里使用Easy Less插件自动生成css文件
优点：
- css逻辑更加清晰
- 免去了繁琐的计算（直接写计算式就可）
注释
// 单行注释 CTRL+/ 不会跑到css中 /* 多行注释 Alt+shift+a 会跑到css中*/
语法
.box {
/* 加法 */
width: 100 + 30px;
/* 减法 */
width: 100 - 30px;
/* 乘法 */
width: 100 * 30px;
/* 除法 */
/* 注意：除法一定要加括号 */
width: (100 / 20px);
}嵌套
.box {
width: 100px;
height: 100px;
background-color: green;
li {
width: 40px;
a{
color: blueviolet;
// &代表当前元素
&:hover {
color: aqua;
}
}
&::after {
content: '';
font-size: 20px;
}
}
}花括号代表的是项目结构
变量
是一个容器，用来存放所需要的东西 语法：
- 定义变量：@变量名: 值;
- 使用变量：CSS属性：@变量名;
// 变量，修改起来更加简便，可以一次性修改相同变量名的内容
@color_top :pink;
@fonS: 12px;
@bd:1px solid #333;
.box {
background-color: @color_top;
}
.father {
color: @color_top;
p{
font-size: @fonS;
border: @bd;
}
}Less文件的导入
语法：
@import "文件路径"；Less文件导出
方法一：
在设置里面打开setting.json 添加如下代码，就可以自动生成到css文件夹中
"less.compile": {
"out": "../css/"
},方法二：
在Less文件中最上面添加：
// out: ./css/base.css- 其中css是css文件保存的文件夹名，即css文件的保存路径
- base.css是在css文件夹下新建base.css文件
禁止导出
在Less文件中最上面添加：
// out: false本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-03-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读