CSS——less

1、less简述

less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。

在px单位转换到rem单位过程中，哪项工作是最麻烦的？

答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。

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

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

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

.less文件：

.father {
    color: red;

    width: (68 / 37.5rem);

    .son {
        background-color: pink;
    }
}

保存.less文件以后，在同级别的目录下生成的.css文件如下图所示：

.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  background-color: pink;
}

2、Easy Less插件

Easy Less是vscode插件，其作用：less文件保存自动生成css文件。

一定要在vscode中加了这个插件，才能保存后自动生成css文件。

3、less语法

a、四则运算

运算： 加、减、乘直接书写计算表达式；

            除法需要添加 小括号 或 .

.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    // 除法
    // 68  > rem
    width: (68 / 37.5rem);
    // height: 29 ./ 37.5rem;

    height: 29 / 37.5rem;

}

表达式存在多个单位以第一个单位为准！

b、嵌套

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

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

 c、使用Less变量设置属性

 

网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？

把颜色提前存储到一个容器，设置属性值为这个容器名。

语法：

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

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

.less文件：

// 1. 定义. 2.使用
@colora:green;

.box {
    color: @colora;
}

.father {
    background-color: @colora;
}

.aa {
    color: @colora;
}

 对应的.css文件：

.box {
  color: green;
}
.father {
  background-color: green;
}
.aa {
  color: green;
}

d、导入

开发网站时，网页如何引入公共样式？

答：CSS：书写link标签；

        Less：导入

导入的语法: @import “文件路径”;

 

 导入了这个less文件，保存以后这个less对应的css都会有。

e、导出

less一保存，都是在当前的路径生成css，希望这个路径发生改变。

方法一：

        配置EasyLess插件， 实现所有Less有相同的导出路径；

        配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

        

         这就能实现把less文件夹里的less文件，保存后生成的css文件都放到css文件夹中。

方法二：单独导出路径

让对应less文件的css文件导出到另外一个路径；

Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

// out: ./qqq/daqiu.css

// out: ./abc/

.box {
    color: red;
}

 第一行不仅换了位置，还改了css文件名；第二行是换位置。./表示当前文件夹的目录。

但是，有一些less不需要导出css文件；这个less文件是被别人import导入的，就不用导出css文件，比如base.less，common.less。

禁止导出：在less文件第一行添加: // out: false