less基础介绍

什么是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;

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！