第五章：CSS预处理器入门

1. Sass/LESS介绍与安装

   Sass（Syntactically Awesome Stylesheets） Sass是最早的CSS预处理器之一，它扩展了CSS的语言特性，允许开发者使用变量、嵌套规则、混合宏、继承、函数等高级功能编写CSS。Sass有两种语法形式：SCSS（Sassy CSS）和Indented（缩进）语法。SCSS是CSS的超集，具有和CSS一样的语法格式，因此可以直接在CSS文件中混用SCSS代码。Sass的优势在于增强了CSS的可维护性、代码复用性和可读性，减少了冗余代码。

   安装与使用 要使用Sass，首先需要安装Ruby环境，然后通过命令行工具执行gem install sass来安装Sass编译器。接着，可以创建.scss或.sass文件，通过编译器将其转化为.css文件供浏览器识别。

   LESS（Leaner Style Sheets） LESS也是流行的CSS预处理器之一，其设计理念与Sass相似，同样提供了变量、嵌套、混合宏和函数等功能。LESS语法与CSS高度兼容，易于学习和迁移。与Sass一样，LESS也需要相应的编译器或构建工具（如Gulp、Webpack等）将其转换为标准CSS。

   安装与使用 对于LESS的安装，通常需要下载LESS.js文件并在客户端运行，或者在服务器端安装Node.js环境后通过npm（Node Package Manager）安装less编译器，命令为npm install -g less。然后，可以创建.less文件并使用lessc命令行工具编译成CSS文件。

   主流CSS预处理器功能特点与优势

   • 变量：允许定义和复用颜色、字体大小、边距等值，简化代码维护，提高一致性。

   • 嵌套：模拟HTML结构，使CSS规则具有层级性，提高代码可读性。

   • 混合宏（Mixins）：封装常用的CSS样式块，只需调用即可重复使用，支持传参，增强代码复用能力。

   • 函数：提供数学计算、颜色操作等函数，增强CSS表达能力，简化复杂的计算任务。

   • 继承（仅Sass）：一个选择器可以从另一个选择器那里继承所有样式，避免代码重复。

   • 导入（Imports）：允许将样式拆分成多个文件，便于模块化管理，提高团队协作效率。

2. 变量、嵌套、混合宏、函数等基础用法示例

   Sass/SCSS示例：

   Scss

   // 变量
   $primary-color: #007bff;
   $base-font-size: 16px;
   ​
   body {
     font-size: $base-font-size;
   }
   ​
   .button {
     background-color: $primary-color;
   }
   ​
   // 嵌套
   .header {
     background: #333;
     .logo {
       color: white;
     }
   }
   ​
   // 混合宏
   @mixin button-styles($bg-color, $txt-color) {
     background-color: $bg-color;
     color: $txt-color;
     padding: 10px 20px;
     border-radius: 5px;
   }
   ​
   .my-button {
     @include button-styles(#ffcc00, #333);
   }
   ​
   // 函数
   @function lighten-color($color, $amount) {
     @return mix(white, $color, $amount);
   }
   ​
   .lightened-bg {
     background-color: lighten-color(#333, 20%);
   }

   LESS示例：

   Less

   // 变量
   @primary-color: #007bff;
   @base-font-size: 16px;
   ​
   body {
     font-size: @base-font-size;
   }
   ​
   .button {
     background-color: @primary-color;
   }
   ​
   // 嵌套
   .header {
       background: #333;
       .logo {
         color: white;
       }
   }
   ​
   // 混合宏
   .button-styles(@bg-color, @txt-color) {
     background-color: @bg-color;
     color: @txt-color;
     padding: 10px 20px;
     border-radius: 5px;
   }
   ​
   .my-button {
     .button-styles(#ffcc00, #333);
   }
   ​
   // 函数
   .lighten(@color, @amount) when (iscolor(@color)) {
     @lightened-color: fadein(@amount, @color);
     @lightened-color;
   }
   ​
   .lightened-bg {
     background-color: .lighten(#333, 20%);
   }

通过运用CSS预处理器的这些特性，开发者能够编写更简洁、易读且可维护性强的CSS代码，显著提升开发效率和项目的整体质量。