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

1. 其中css是css文件保存的文件夹名，即css文件的保存路径
2. base.css是在css文件夹下新建base.css文件

禁止导出

在Less文件中最上面添加：

// out: false