什么是less？ Less是一个C5S预处理器,Less文件后缀是,less。扩充了 CSS 语言,使CSS 具备一定的逻辑性、计算能力 注意事项： 浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件 VS Code 插件: Easy LESS，保存 less文件后自动生成对应的 CSS 文件
我们来简单的玩玩less吧 注意：现在我们是没有css后缀文件的 我们写一点到less里
.father {
width: 100px;
.son {
width: 100px;
}
}
保存后我们发现多出一个文件 我们来看看index.css中都有些什么吧！
.father {
width: 100px;
}
.father .son {
width: 100px;
}
一、less运算
加、减、乘直接书写计算表达式 除法需要添加 () 或 . less中：
.box {
width: 100+20px;
width: 100-20px;
width: 100 * 2px;
width: (100/200px);
}
css中：
.box {
width: 120px;
width: 80px;
width: 200px;
width: 0.5px;
}
二、less嵌套
作用：可以快速生成后代选择器
less中
.father{
width: 100px;
.son {
width: 100px;
a{
color: red;
// & 表示当前的选择器
&:hover {
color: pink;
}
}
}
}
css中
.father {
width: 100px;
}
.father .son {
width: 100px;
}
.father .son a {
color: red;
}
.father .son a:hover {
color: pink;
}
三、less变量
概念: 容器，存储数据 作用:存储数据，方便使用和修改 语法: 定义变量:@变量名: 数据； 使用变量: CSS属性: @变量名；
less中
@myColor:red;
.box{
color: @myColor;
}
.boss{
color: @myColor;
}
css中
.box {
color: red;
}
.boss {
color: red;
}
四、less导入
作用:导入less 公共样式文件 语法:导入: @import “文件路径”; 提示:如果是 less 文件可以省略后缀
导入.less：
@import "./index.less";
// @import "./index";
导入.css：
.box {
color: red;
}
.boss {
color: red;
}
五、less导出
写法:在 less 文件的第一行添加 // out: 存储URL 提示:文件夹名称后面添加 /
// out: ./导出1.css
我们也可以禁止导出
// out: false;
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！