CSS预处理器

一、什么是CSS预处理器？

CSS 预处理器是一种特殊的编程语言（脚本语言），它扩展了 CSS 的功能，能够使用变量、混合（Mixins）、函数、循环、条件语句等编程特性来编写 CSS 代码。预处理器会将这些代码编译成标准的 CSS 代码，供浏览器解析和渲染。

简单来说，CSS 预处理器是一种让 CSS 更易于编写、维护和管理的工具。

二、为什么要使用CSS预处理器？

CSS 预处理器具有以下优势：

• 提高代码的可维护性： 使用变量、混合等特性可以减少重复代码，使代码更易于阅读和修改。
• 提高开发效率： 可以使用编程特性来自动化生成 CSS 代码，减少手动编写的工作量。
• 增强代码的可读性： 更简洁的语法和逻辑结构使代码更易于理解和维护。
• 方便管理和重用代码： 可以将常用的样式封装成混合，在不同的地方重复使用。
• 支持模块化开发： 可以将样式拆分成多个文件，方便团队协作和代码组织。

三、常见的CSS预处理器

1.Sass

• 最流行的 CSS 预处理器之一，具有成熟的社区和丰富的插件生态系统。
• 有两种语法：
  • SCSS（Sassy CSS）： 使用类似于 CSS 的语法，文件扩展名为 .scss。
  • Sass（缩进语法）： 使用缩进代替花括号和分号，语法更简洁，文件扩展名为 .sass。

2.Less

• 类似于 Sass，但语法更接近 CSS，易于学习和使用。
• 文件扩展名为 .less。

3.Stylus

• 一种灵活且功能强大的 CSS 预处理器，语法非常灵活，可以省略冒号、分号和花括号。
• 文件扩展名为 .styl。

四、CSS预处理器的基本语法及使用

1. 变量

• Sass/SCSS:

使用 $ 符号定义变量，存储颜色、字体、间距等常用值。

$primary-color: #007bff;
$font-size: 16px;body {font-size: $font-size; // font-size:16px;color: $primary-color; // color:#007bff;
}

• Less:

@primary-color: #007bff;
@font-size: 16px;body {font-size: @font-size;color: @primary-color;
}

• Stylus:

primary-color = #007bff
font-size = 16pxbodyfont-size font-sizecolor primary-color

2. 嵌套

在样式规则中嵌套其他样式规则，减少选择器的重复书写。

• Sass/SCSS:

nav {
// nav ul:  nav下的ul标签ul {margin: 0;padding: 0;list-style: none;}
// nav li : nav 下的li标签li {display: inline-block;}
// nav a: nav 下的 a 标签a {display: block;padding: 6px 12px;text-decoration: none;}
}

• Less:

nav {ul {margin: 0;padding: 0;list-style: none;}li {display: inline-block;a {display: block;padding: 6px 12px;text-decoration: none;}}
}

•  Stylus:

navulmargin 0padding 0list-style nonelidisplay inline-blockadisplay blockpadding 6px 12pxtext-decoration none

3. 混合

定义可重用的样式块，可以在不同的样式规则中调用。

• Sass/SCSS:

// @mixin 关键字：@mixin 用于定义一个混合器，混合器可以看作是一段可复用的 CSS 代码块。
// 定义了一个名为 border-radius 的混合器
// 参数 $radius：$radius 是一个 Sass 变量，作为混合器的参数。在调用这个混合器时，
// 需要传入一个值来替换 $radius，这个值通常是一个长度单位（如 px、em 等），
// 用于指定元素的圆角半径。// 定义混合器
@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;
}// 使用混合器
.button {@include border-radius(5px);
}

• Less:

.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;
}.button {.border-radius(5px);
}

•   Stylus:

border-radius(radius)-webkit-border-radius: radius-moz-border-radius: radiusborder-radius: radius.buttonborder-radius(5px)

4. 继承

一个选择器继承另一个选择器的所有样式。

• Sass/SCSS:

.message {border: 1px solid #ccc;padding: 10px;color: #333;
}// @extend 指令：@extend 是 Sass 中的一个指令，用于使一个选择器继承另一个选择器的样式。
// 这里 .success-message 选择器通过 @extend .message，继承了 .message 选择器定义的所有样式属性，
// 即它也会有 1px 浅灰色实线边框、10px 内边距以及深灰色文本颜色。
.success-message {@extend .message;border-color: green;color: green;
}

• Less:

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

• Stylus:

.messageborder: 1px solid #cccpadding: 10pxcolor: #333.success-messageextend: .messageborder-color: greencolor: green

5. 函数

定义可重用的函数，用于计算和转换 CSS 值。

• Sass/SCSS为例，剩下两种可以查资料

// @function 关键字：在 Sass 中，@function 用于定义一个自定义函数。
// 这里定义了一个名为 double 的函数。// 参数 $number：$number 是函数的参数，它是一个 Sass 变量。
// 在调用这个函数时，需要传入一个具体的值来替换 $number，这个值可以是任何 Sass 支持的数值类型，
// 比如长度值（如 px、em 等）、无单位的数值等。
@function double($number) {@return $number * 2;
}.element {width: double(5px); // width: 10px;// 调用 double 函数：在设置 width 属性时，调用了之前定义的 double 函数，
// 并传入参数 5px。函数会将传入的 5px 乘以 2，得到 10px，最终将 width 属性的值设置为 10px。}

6. 运算符

支持算术运算符（+、-、*、/、%）、比较运算符（==、!=、>、<、>=、<=）和逻辑运算符（and、or、not）。

• Sass/SCSS为例，剩下两种可以查资料

$base-font-size: 16px;
$line-height: 1.5;body {font-size: $base-font-size;line-height: $line-height;padding: $base-font-size * $line-height;
}

7. 指令

• @import：用于导入其他的 Sass/SCSS 文件，实现代码的模块化。
• @if、@else：用于条件判断。
• Sass/SCSS为例，剩下两种可以查资料

$theme: dark;body {@if $theme == dark {background-color: #333;color: #fff;} @else {background-color: #fff;color: #333;}
}

• @for、@each、@while：用于循环。

@for $i from 1 through 3 {.item-#{$i} {width: 20px * $i;}
}
// @for 属于 Sass 的控制指令，用于创建循环。
// $i 是一个 Sass 变量，作为循环的计数器。
// from 1 through 3 明确了循环的范围，through 表明循环会包含起始值（1）和结束值（3），
// 也就是 $i 会依次取值 1、2、3。// 选择器 .item-#{$i}：#{$i} 是 Sass 的插值语法，它能把变量 $i 的值嵌入到选择器里。
// 当 $i 为 1 时，选择器就是 .item-1；$i 为 2 时，选择器是 .item-2；$i 为 3 时，选择器是 .item-3。
// 属性 width: 20px * $i;：width 属性的值由 20px 乘以 $i 得到。
// 当 $i 为 1 时，width 是 20px；$i 为 2 时，width 是 40px；$i 为 3 时，width 是 60px。// 编译后的代码
.item-1 {width: 20px;
}
.item-2 {width: 40px;
}
.item-3 {width: 60px;
}

五、总结 

特性	Sass/SCSS	Less	Stylus
文件扩展名	.scss (SCSS), .sass (Sass)	.less	.styl
变量	$variable: value;	@variable: value;	variable = value
Mixin	@mixin name { ... } @include name;	.name() { ... } .name();	name() { ... } name()
嵌套	支持深度嵌套	支持深度嵌套	支持深度嵌套，更灵活
继承	@extend selector;	&:extend(selector);	extend: selector
函数	@function name($arg) { ... }	.name(@arg) { ... }	name(arg) { ... }
条件语句	@if { ... } @else { ... }	when (@condition) { ... } / guards	if condition { ... } else { ... }
循环	@for, @each, @while	没有内置循环，可使用 JavaScript 解决	for val in list { ... }