CSS 预处理器 - 技术栈

CSS 预处理器是一种扩展了 CSS 功能的脚本语言，允许使用变量、嵌套规则、混合（Mixins）、函数 等编程技术，这些功能在原生 CSS 中是不支持的，使CSS 代码更加模块化、易于维护、复用性更高。目前最流行的 CSS 预处理器包括 Sass、Less 和 Stylus。

1. Sass

Sass 是最早也是最受欢迎的 CSS 预处理器之一，由 Hampton Catlin 创建，后来被 Ruby 社区接管并继续发展。Sass 有两种语法：SCSS（Sassy CSS）和 Sass（缩进语法）。

SCSS 使用大括号{}和分号;来分隔语句和声明。

css 复制代码

$primary-color: #333;  
.container {   
  color: $primary-color;  
}

Sass使用缩进来表示代码块，不使用大括号和分号。

css 复制代码

$primary-color: #333  
.container  
  color: $primary-color

混合 @mixin定义 ``@include调用

css 复制代码

@mixin button-style {  
  display: inline-block;  
  padding: 10px 20px;  
  font-size: 16px;  
  cursor: pointer;  
  border-radius: 5px;  
  border: none;  
  &:hover {  
    background-color: #eee;  
  }  
}  
  
.button {  
  @include button-style;  
  background-color: blue;  
  color: white;  
}

继承 @extend

css 复制代码

.message {  
  border: 1px solid #ccc;  
  padding: 10px;  
  color: #333;  
}  
  
.success {  
  @extend .message;  
  border-color: green;  
}

变量：可以存储颜色、字体、选择器名等。
嵌套规则：可以减少重复代码，提高代码的可读性。
混合（Mixins）：允许定义一组 CSS 声明，然后可以在一个地方引入它们，或者在多个地方重用。
继承：Sass 允许一个选择器继承另一个选择器的样式。
函数：Sass 有内置函数，也允许定义自己的函数。

2. Less

Less 是由 Alexis Sellier 开发的另一个流行的 CSS 预处理器，它的语法类似于 CSS，并且扩展了 CSS 的功能。Less 允许你使用变量、嵌套规则、混合（mixins）和函数等特性。

css 复制代码

@primary-color: #333;  
.container {    
  color: @primary-color;   
}

混合

css 复制代码

.button-style() {  
   ...
}  
  
.button {  
  .button-style();  
  background-color: blue;  
  color: white;  
}

继承Less 原生并不直接支持继承，这里通过混合来模拟

css 复制代码

.message() {  
  border: 1px solid #ccc;  
  padding: 10px;  
  color: #333;  
}  
  
.message {  
  .message();  
}  
  
.success {  
  .message();  
  border-color: green;  
}

运算：Less 支持在属性值中进行数学运算。

3. Stylus

Stylus 是一个富有表现力的、健壮的、动态的 CSS 语言，由 TJ Holowaychuk 编写。Stylus 的语法非常灵活，几乎可以写成任何你想要的样式。它允许你使用缩进、分号、大括号或任何组合来编写样式。

css 复制代码

$primary-color = #333  
.container   
  color $primary-color

混合

css 复制代码

button-style()  
  ... 
  
.button  
  button-style()  
  background-color blue  
  color white

继承 extend()

css 复制代码

.message  
  border 1px solid #ccc  
  padding 10px  
  color #333  
  
.success  
  extend(.message)  
  border-color green

条件语句和循环：Stylus 允许编写条件语句和循环，这是 Sass 和 Less 所不具备的。

区别

1、定义变量

都使用**$** 符号来定义变量，Less 也可以使用@，Stylus 不能以@开头。

2、混合

Sass/SCSS使用@mixin和@include来定义和调用混合，而Less则使用.（点）语法。

Stylus 使用类似函数的方式来定义和调用可重用的代码块，但语法更加灵活。

3、继承

Sass/SCSS使用@extend指令，而Less则通过嵌套和混合来实现类似的功能。

Stylus 使用extend()函数来实现继承。