前端基础 - 深入浅出css预处理器

CSS预处理器是一种基于CSS的另一种语言，通过预处理器编写的代码会被编译成普通的CSS文件。预处理器在CSS的基础上添加了许多新特性和功能，有助于提升CSS文件的组织结构和代码可维护性。

1. 常见的CSS预处理器

1. 1 Less和Sass（包括Sass的两种语法形式：Sass和SCSS）。

2. 功能

1. 嵌套：允许在样式规则中嵌套其他样式规则，反映层级与约束关系。
2. 变量和计算：引入变量，可用于存储颜色、尺寸等信息，同时支持数学运算，减少代码重复。
3. Extend和Mixin：代码片段的复用，Extend用于共享样式规则，Mixin用于在样式表中进行样式复用并可进行传参操作。
4. 循环：支持在样式表中使用循环结构，适用于生成复杂但有规律的样式。
5. Import：模块化，允许在样式表中导入其他样式文件，有助于提高可维护性和代码复用。

3. 详解less与sass

1. Less：

 1. 安装：通过npm安装Less编译器。

     ```
     npm install less -g
     ```

  2. 支持嵌套书写，提高样式层级的可读性。

     ```less
     // Less中嵌套样式的示例代码
     .navbar {
       background-color: #f5f5f5;
       padding: 10px;
     
       // 嵌套规则应用于锚点标签
       a {
         color: #007bff;
         margin-right: 10px;
     
         &:hover {
           text-decoration: underline;
         }
       }
     }
     ```

  3. &符号表示父选择器，用于指定嵌套规则。

     ```less
     // Less中使用&符号的示例代码
     .button {
       border: 1px solid #007bff;
       background-color: white;
       color: #007bff;
     
       // 当按钮处于active状态时应用的样式
       &:active {
         background-color: #007bff;
         color: white;
       }
     }
     ```

  4. 变量定义：使用@符号定义变量，如@fontSize。

     ```less
     // Less中的变量定义示例代码
     @primaryColor: #007bff;
     @fontSize: 16px;
     
     .header {
       color: @primaryColor;
       font-size: @fontSize;
     }
     ```

  5. 变量运算：支持颜色、像素等单位的运算，方便定义主题等样式。

     ```less
     // Less中的变量运算示例代码
     @baseFontSize: 16px;
     @headerFontSize: @baseFontSize * 1.5;
     
     .header {
       font-size: @headerFontSize;
     }
     ```

  6. Mixin：使用@mixin定义一段样式，在需要时进行引用并传递参数，实现样式复用。

     ```less
     // Less中使用Mixin的示例代码
     // Mixin定义
     .rounded-corners(@radius) {
       border-radius: @radius;
     }
     
     // 使用Mixin
     .button {
       background-color: #007bff;
       color: white;
       padding: 10px;
       .rounded-corners(5px);
     }
     
     .card {
       background-color: #f5f5f5;
       padding: 20px;
       .rounded-corners(10px);
     }
     ```

  7. Extend：使用@extend共享相同的样式规则，不复制样式。

     ```less
     // Less中使用Extend的示例代码
     // 公共样式规则
     .button-common-style {
       background-color: #007bff;
       color: white;
       padding: 10px;
     }
     
     // 特定按钮样式
     .primary-button {
       &:extend(.button-common-style);
       border: 1px solid #007bff;
     }
     
     .secondary-button {
       &:extend(.button-common-style);
       border: 1px solid gray;
     }
     ```

  8. Loop：没有直接的循环结构，但可以通过递归调用Mixin来实现循环效果。

     ```less
     // Less中使用递归Mixin实现类似循环的示例代码
     .looping-mixin(@n) when (@n > 0) {
       .element-@{n} {
         width: 10px * @n;
         height: 10px;
         background
     ```

-color: red;
margin: 5px;
}
.looping-mixin(@n - 1);
}

     .looping-mixin(5);
     ```

  9. Import：通过@import导入其他Less文件，实现模块化。

     ```less
     // Less中使用@import的示例代码
     // main.less
     @import "variables.less";
     @import "typography.less";
     @import "layout.less";
     ```

2. Sass：

  1. 安装：通过npm安装node-sass。

     ```
     npm install node-sass -g
     ```

  2. 具有不同的格式选项，保留嵌套格式等。

     ```scss
     // Sass中不同格式选项的示例代码
     // 使用紧凑格式输出CSS
     // 在命令行中设置此选项：node-sass input.scss output.css --output-style compact
     
     .navbar {
       background-color: #f5f5f5;
       padding: 10px;
       a {
         color: #007bff;
         margin-right: 10px;
         &:hover {
           text-decoration: underline;
         }
       }
     }
     ```

  3. 命令行可以指定不同的输出样式。

     ```scss
     // Sass中不同输出样式的示例代码
     // 在命令行中运行以下命令：
     // 1. node-sass input.scss output.css --output-style nested
     // 2. node-sass input.scss output.css --output-style expanded
     // 3. node-sass input.scss output.css --output-style compact
     // 4. node-sass input.scss output.css --output-style compressed
     
     .navbar {
       background-color: #f5f5f5;
       padding: 10px;
       a {
         color: #007bff;
         margin-right: 10px;
         &:hover {
           text-decoration: underline;
         }
       }
     }
     ```

  4. 变量定义：使用$符号定义变量，如$fontSize。

     ```scss
     // Sass中的变量定义示例代码
     $primaryColor: #007bff;
     $fontSize: 16px;
     
     .header {
       color: $primaryColor;
       font-size: $fontSize;
     }
     ```

  5. 其他功能与Less类似，包括Mixin、Extend和循环（支持for循环）。

     ```scss
     // Sass中使用mixin、extend和loop的示例代码
     // 定义Mixin
     @mixin rounded-corners($radius) {
       border-radius: $radius;
     }
     
     // 使用Mixin
     .button {
       background-color: #007bff;
       color: white;
       padding: 10px;
       @include rounded-corners(5px);
     }
     
     .card {
       background-color: #f5f5f5;
       padding: 20px;
       @include rounded-corners(10px);
     }
     
     // Extend
     .button-common-style {
       background-color: #007bff;
       color: white;
       padding: 10px;
     }
     
     .primary-button {
       @extend .button-common-style;
       border: 1px solid #007bff;
     }
     
     .secondary-button {
       @extend .button-common-style;
       border: 1px solid gray;
     }
     
     // Loop (使用for循环)
     @for $i from 1 through 5 {
       .element-#{$i} {
         width: 10px * $i;
         height: 10px;
         background-color: red;
         margin: 5px;
       }
     }
     ```

3. CSS预处理器框架：

1. CSS预处理器框架是一组按需使用的、别人编写好的CSS预处理器代码。
2. sass-compass、less-lesshat、less-est等都是提供现成的Mixin和样式规则，类似于JavaScript类库的封装。

4. 面试真题：

1. 常见CSS预处理器是Less（基于Node.js）和Sass（Ruby有Node版本）。
2. 预处理器的作用包括：组织CSS代码、提高代码复用率、提高可维护性。
3. 预处理器的能力包括：嵌套、变量与计算、Extend与Mixin、循环、导入实现CSS文件模块化。
4. 预处理器的优点是提高代码复用率和可维护性，缺点是需要引入编译过程，有一定的学习成本。
5. 目前预处理器不是唯一的解决方案，可能有其他技术手段可以达到类似的效果，但预处理器仍然是一种有效的CSS开发工具。