CSS进阶-Less

• 介绍

• less是一个CSS预处理器 less文件后缀是.less

• 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力

• 注意：浏览器不识别less代码，网页要引入对应生成的css文件

• vscode中可配合Easy Less插件使用，less文件保存自动生成css文件

• 注释

// 单行注释 无法生成到css中

/* 块注释 */

• 计算

• less文件里支持计算

• 加减乘直接写

• 除法需要添加小括号或点.

.box {
    width: 110 + 10px;
    height: 100 - 10px;
    font-size: 8 * 2px;
    padding: (10 / 2px); // 工作常用
    margin: 8 ./ 2px;
}

• 嵌套

• less支持直接在父级里书写子级样式

.father{
    color: red;
    .son{
        color: aqua;
        /* &表示当前选择器 */
        &:hover{
            color: gold;
        }
    }
}

• less写css有个巧妙地应用：激活状态和非激活状态

// 只有active时，颜色是红色；通过js增加unactive时，有两个类名，颜色是蓝色
.active{
    color: red;
    &.unactive{ // .active.unactive 这个巧妙
        color: blue;
    }
}

• 变量

// 1 定义变量
@color: #2c2cdd;

.box{
    // 2 使用变量
    color: @color;
}

• 导入其他less文件

@import './01-体验less.less'; // 可省略后缀.less

• 导出

• 方法1：修改vscode中easy less插件的json文件，统一生成css的路径

• 方法2：在less文件第一行(必须)书写 // out: 路径

// out: ./abc/

• 禁止导出（生成css文件）

• 在less文件第一行(必须)书写 // out: false

// out:false