一、Less的用法
1.定义变量与值，可以重复使用
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* 使用变量 */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
2.嵌套规则
nav {
ul {
margin: 0;
padding: 0;
li {
display: inline-block;
}
}
}
将以上代码转换为 CSS 代码，如下所示：
nav ul {
margin: 0;
padding: 0;
}
// 注意：是后代选择器
nav ul li {
display: inline-block;
}
更多查看 ：Less快速入门文档
二、在Html 文件中使用 Less
- vscode 编译器安装插件 Easy LESS
它的作用就是帮你把 .less 文件转换成 .css 文件
2.在 css 文件夹下新建 .less 文件， 编辑 .less 文件点击保存会自动生成同名的 .css 文件，在 HTML 里链接 .css 文件即可。
网友评论