Less

1 Less简介

1 Less是一个CSS预处理器, Less文件后缀是.less

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

3 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

4 Easy Less(vscode插件) : 作用：less文件保存自动生成css文件

2 Less语法

1 注释:

单行注释 语法：// 注释内容 快捷键：ctrl + /

块注释 语法：/* 注释内容 */ 快捷键： shift + alt + A

2 运算：

body {
    // 注意:单位转换 计算时以第一个单位为准
    width: 100px + 100;
    height: 100px - 20px;
    margin: 100 * 2em;
    // 除法需要添加 小括号 或 .
    padding: (100 / 2em);
    border: 100 ./2em;
}

注意：

1 表达式存在多个单位以第一个单位为准,尽量写在最后一个数字上

2 除法比较特殊, 需要添加 小括号 或 .

3 先乘除后加减

3 嵌套:

1 作用：快速生成后代选择器。

2 语法 :

.father {
    width: 500px;
    height: 500px;
    background-color: pink;

    // 孩子
    .son {
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
}

&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

.father {
    width: 400px;
    height: 400px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
​
    .son {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        transition: all 2s;
    }
​
    /* &:hover .son {
        background-color: hotpink;
    } */
​
    &:hover {
        .son {
            background-color: hotpink;
        }
    }
}

4 变量

1 变量：存储数据，方便使用和修改。

2 语法：

        定义变量：@变量名: 值;

        使用变量：CSS属性：@变量名;

@bgColor: hotpink;
.son {
            background-color: @bgColor;
        }

3 导入:

less的导入实际是less文件的导入.

使用less导入的好处是减少了html页面中link标签的数量.

@import './体验less.less';
@import: url(./体验less.less);

4 导出

必须写在第一行

导入到当前文件夹中的css文件夹中

// out:./mycss

导入到上一个文件夹中的css文件夹中

// out:./mycss/

5 禁止导出

// out:false