超硬核，css的预处理介绍

1. Sass

Sass（Syntactically Awesome Style Sheets）是最流行的 CSS 预处理器之一，支持两种语法：SCSS 和 Sass。

1.1 SCSS 语法

SCSS 是一种更接近 CSS 的语法，使用大括号和分号。

示例：

$primary-color: #3498db; // 定义变量

body {
    font-family: Arial, sans-serif;
    background-color: $primary-color; // 使用变量

    h1 {
        color: white;
        text-align: center;
    }

    .container {
        padding: 20px;

        .button {
            background-color: darken($primary-color, 10%); // 使用函数
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;

            &:hover {
                background-color: lighten($primary-color, 10%); // 嵌套选择器
            }
        }
    }
}
​

1.2 Sass 语法

Sass 语法不使用大括号和分号，使用缩进来表示层级关系。

示例：

$primary-color: #3498db

body
    font-family: Arial, sans-serif
    background-color: $primary-color

    h1
        color: white
        text-align: center

    .container
        padding: 20px

        .button
            background-color: darken($primary-color, 10%)
            color: white
            padding: 10px
            border: none
            border-radius: 5px

            &:hover
                background-color: lighten($primary-color, 10%)
​

2. LESS

LESS 是另一个流行的 CSS 预处理器，语法与 CSS 非常相似。

示例：

@primary-color: #3498db; // 定义变量

body {
    font-family: Arial, sans-serif;
    background-color: @primary-color; // 使用变量

    h1 {
        color: white;
        text-align: center;
    }

    .container {
        padding: 20px;

        .button {
            background-color: darken(@primary-color, 10%); // 使用函数
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;

            &:hover {
                background-color: lighten(@primary-color, 10%); // 嵌套选择器
            }
        }
    }
}
​

3. Stylus

Stylus 是一个灵活的 CSS 预处理器，支持多种语法风格，包括无分号和无大括号的写法。

示例：

primary-color = #3498db // 定义变量

body
    font-family Arial, sans-serif
    background-color primary-color // 使用变量

    h1
        color white
        text-align center

    .container
        padding 20px

        .button
            background-color darken(primary-color, 10%) // 使用函数
            color white
            padding 10px
            border none
            border-radius 5px

            &:hover
                background-color lighten(primary-color, 10%) // 嵌套选择器
​

4. 预处理器的优势

• 变量：可以定义可重用的值，方便管理和修改。
• 嵌套：允许在选择器中嵌套其他选择器，增强可读性。
• 混合：可以定义可重用的样式块，减少重复代码。
• 函数：提供内置函数（如颜色处理、数学运算等），增强样式的动态性。
• 模块化：支持将样式分割成多个文件，便于管理和维护。

5. 如何使用 CSS 预处理器

1. 安装：根据所选的预处理器，使用 npm、yarn 或其他包管理工具安装。例如，安装 Sass：

   npm install -g sass
   ​

2. 编译：使用命令行工具将预处理器文件编译为标准 CSS 文件。例如，编译 SCSS 文件：

   sass style.scss style.css
   ​

3. 引入 CSS 文件：在 HTML 文件中引入编译后的 CSS 文件：

   <link rel="stylesheet" href="style.css">