CSS 预处理器的使用 ？

维护 css 的弊端

1. CSS 是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念
2. CSS 需要书写大量看似没有逻辑的代码，冗余度是比较高
3. 不方便维护及扩展，不利于复用
4. CSS 没有很好的计算能力
5. 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易维护的 CSS 代码
6. 常见的 CSS 预处理器：Sass、Less、Stylus、PostCSS

less 中文地址

less 中文文档

Less

Less 安装

1. 安装 nodejs,可选择版本(8.0)
2. 检查是否安装成功，使用 cmd 命令”node-v”查看版本即可
3. 基于 nodejs 在线安装 Less,使用 cmd 命令"npm install-g less"即可
4. 检查是否安装成功，使用 cmd 命令“lessc-v”查看版本即可

Less 使用

Less 变量

1. 变量是指没有固定的值，可以改变的。因为我们 CSS 中的一些颜色和数值等经常使用。
2. 变量书写规范：@变量名:值;

// 定义一个颜色变量
@color: pink;
@color_black: black;
// 定义一个字体为14px的变量
@font14: 14px;
// 错误的变量名 @1color  @color~@#
// 变量名区分大小写 @color 和 @Color 是两个不同的变量
body {
  background-color: @color;
}
div {
  color: @color_black;
  font-size: @font14;
}
a {
  font-size: @font14;
}

3. 变量命名规范
   • 必须有@为前缀
   • 不能包含特殊字符
   • 不能以数字开头
   • 大小写敏感

Less 编译

VSCode Less插件

1. 此插件可以把 less 文件编译为 css 文件
2. 只需要保存一下 Less 文件，会自动生成 css 文件

Less 嵌套

1. 选择器嵌套

• CSS 写法

.nav .logo {
  color: aqua;
}

• Less 嵌套写法

.nav {
  .logo {
    color: aqua;
  }
}

注意： 子元素直接写在父元素里面即可

2. 伪类|伪元素

• css 写法

a:hover {
  color: lightgreen;
}

• Less 写法

a {
  &:hover {
    color: lightgreen;
  }
}

注意:如果需要使用伪类或者伪元素选择器，则需要在使用的元素前添加&

Less 运算

任何数字、颜色或者变量都可以参与运算。Less 提供了加(+)、减(-)、乘(*)、除(/)算术运算。

@baseFont: 50px;
html {
  font-size: @baseFont;
}
@border: 5px + 5;
div {
  width: 200px - 50;
  height: 200px * 2;
  border: @border solid red;
  background-color: #666 - #222;
}
img {
  // 除法必须使用括号
  width: (82rem / @baseFont);
  height: (82rem / @baseFont);
}

注意事项：

1. 运算符中间左右有个空格隔开。如：1px + 5
2. 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
3. 如果两个值之间只有一个值有单位，则运算结果就取该单位
4. 除法运算必须使用括号括起来,否则无法编译成功

Sass

Stylus

PostCSS