前端

Sass、Less、Stylus

... 2025-7-10 CSS 大约 8 分钟

# Sass

  • 写法：

    Sass 支持传统 css 语法，可省略花括号

  • 变量：

    Sass 的变量是必须$开始，变量名和值要冒号隔开，跟 CSS 属性书写格式一致。

$color: #ff00ff;
body{
	color:$color
}
1
2
3
4

  • 作用域：

    在 Sass 样式中定义变量，没有全局变量概念，因此在 Sass 中定义了相同变量名时，在调用之时要多加小心，不然会给样式带来错误。

  • 混合(Mixins)

    Sass 样式中声明 Mixins 时需要使用“@mixin”，然后后面紧跟 Mixins 的名，可以定义参数，同时可以给参数设置默认值，参数名以“$”符号开始，参数名和参数值之间需要使用冒号（：）分开。

    在选择器调用定义好的 Mixins 需要使用“@include”，然后在其后紧跟要调用的 Mixins 名。以括号方式调用。

// 声明
@mixin test($bW:2px){
	border:$bW solid #fff
}
// 引用
.class {
	@include test(); // 直接引用
	@include test(3px); // 传参引用
}
1
2
3
4
5
6
7
8
9

  • 嵌套(Nesting)

    三种预处理器嵌套语法相同，都可以直接在父选择器内写子选择器，并可以使用“&”引用父选择器。

  • 继承(Inheritance)

    Sass 和 Stylus 的继承是把一个选择器的所有样式继承到另个选择器上，使用“@extend”开始，后面紧跟被继承的选择器







 


p{
	margin: 10px 5px;
	padding: 2px;
}
span{
	// 继承 p 选择器下所有样式
	@extend p;
}
1
2
3
4
5
6
7
8

  • 运算符(Operations)

    支持加减乘除运算以及用括号修改运算顺序，并可以直接换算单位。

  • 颜色函数 - Sass 文档 (opens new window)

// 返回的颜色在$color基础上变亮10%
lighten($color, 10%);
// 返回的颜色在$color基础上变暗10%
darken($color, 10%);
// 返回的颜色在$color基础上饱和度增加10%
saturate($color, 10%);
// 返回的颜色在$color基础上饱和度减少10%
desaturate($color, 10%);
// 返回$color的灰度色
grayscale($color);
// 返回$color的补色
complement($color);
// 返回$color的反相色
invert($color);
// $color1 和 $color2 的 50% 混合色
mix($color1, $color2, 50%);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  • 导入(Import)

    在 CSS 中，并不喜欢用@import 来导入样式，因为这样的做法会增加 http 的请求。

    但是在 CSS 预处理器中的导入(@import)规则和 CSS 的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个 CSS 文件。

    注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

  • 注释(Comment)

    单行注释：//，不会输出到 CSS 中。

    多行注释：/* */，会输出到 CSS 中。

# Less

  • 写法：

    语法与传统写法相同

  • 变量：

    Less 的变量名使用@符号开始：变量名和值要冒号隔开，跟 CSS 属性书写格式一致。

@color: #ff00ff;
body {
  color: @color;
}
1
2
3
4

  • 作用域：

    Less 中的作用域和其他程序语言中的作用域非常的相同，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往上查找，直到根为止

  • 混合(Mixins)

    在 Less 可以将 Mixins 看成是一个类选择器，当然 Mixins 也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。

    直接写定义 Mixins 的类选择器就可以直接以括号方式调用。

// 声明
.test(@bW:2px) {
  border: @bW solid #fff;
}
// 调用
.class {
  .test(); // 直接引用
  .test(3px); // 传参引用
}
1
2
3
4
5
6
7
8
9

  • 嵌套(Nesting)

    三种预处理器嵌套语法相同，都可以直接在父选择器内写子选择器，并可以使用“&”引用父选择器。

  • 继承(Inheritance)

    Less 是将被继承中的样式嵌套到每个选择器里面。直接在选择器里写上要被继承的选择器即可。






 


p{
	margin: 10px 5px;
	padding: 2px;
}
span{
	p; // 继承 p 选择器下所有样式
}
1
2
3
4
5
6
7
// 返回的颜色在@color基础上变亮10%
lighten(@color, 10%);
// 返回的颜色在@color基础上变暗10%
darken(@color, 10%);
// 返回的颜色在@color基础上饱和度增加10%
saturate(@color, 10%);
// 返回的颜色在@color基础上饱和度降低10%
desaturate(@color, 10%);
// 返回的颜色在@color基础上色调增加10
spin(@color, 10);
// 返回的颜色在@color基础上色调减少10
spin(@color, -10);
// 返回的颜色是@color1和@color2两者的混合色
mix(@color1, @color2);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  • 导入(Import) 和 Sass 一样

  • 注释(Comment)

    单行注释：//，不会输出到 CSS 中。

    多行注释：/* */，会输出到 CSS 中。

# Stylus

  • 写法：

    可省略花括号和分号

  • 变量：

    Stylus 对变量名没有任何限定，可以是$开始，也可以是任意字符，而且与变量值之间可以用冒号、空格、等号隔开

bgColor = #f6f5f4
$width = 123px
body{
	background: bgColor
	width: $width
}
1
2
3
4
5
6

  • 作用域：

    其作用域的特性和 Less 一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。

  • 混合(Mixins)

    不使用任何符号，就是直接声明 Mixins 名，然后在定义参数和默认值之间用等号（=）来连接。

    直接以括号方式调用。

// 声明
test(bW=2px){
	 border: bW solid #fff;
}
// 引用
.class{
	test(); // 直接引用
	test(3px); // 传参引用
}
1
2
3
4
5
6
7
8
9

  • 嵌套(Nesting)

    三种预处理器嵌套语法相同，都可以直接在父选择器内写子选择器，并可以使用“&”引用父选择器。

  • 继承(Inheritance)

    Sass 和 Stylus 的继承是把一个选择器的所有样式继承到另个选择器上，使用“@extend”开始，后面紧跟被继承的选择器







 


p{
	margin: 10px 5px;
	padding: 2px;
}
span{
	// 继承 p 选择器下所有样式
	@extend p;
}
1
2
3
4
5
6
7
8

  • 运算符(Operations)

    支持加减乘除运算、关系运算、逻辑运算等以及用括号修改运算顺序。

  • 颜色函数 - Stylus 文档 (opens new window)

// 返回的颜色在'color'基础上变亮10%
lighten(color, 10%);
// 返回的颜色在'color'基础上变暗10%
darken(color, 10%);
// 返回的颜色在'color'基础上饱和度增加10%
saturate(color, 10%);
// 返回的颜色在'color'基础上饱和度降低10%
desaturate(color, 10%);
1
2
3
4
5
6
7
8

  • 导入(Import) 和 Sass 一样

  • 注释(Comment)

    单行注释：//，不会输出到 CSS 中。

    多行注释：/* */，Stylus 转译时，只有在“compress”选项未启用的时候才会被输出来

    多行缓冲注释：/*！ ... */，告诉 Stylus 压缩的时候这段无视直接输出。

  • Stylus 还有一个独特功能，不需要分配值给变量就可以定义引用属性

div
   width  w = 150px
   margin-left  -(w / 2)
1
2
3

# CSS 预处理器的高级应用

# 条件语句

  • Sass 的条件语句和其他编程语言的条件语句非常相似
$type: monster;
p {
  @if 1 + 1 == 2  {
    color: blue;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
1
2
3
4
5
6
7
8
9
10
  • Less 的条件语句有些另类，其实现方式是利用关键词“when”
.mixin (@a) when (@a >= 10) {
  background-color: black;
}
.mixin (@a) when (@a < 10) {
  background-color: white;
}
.class1 {
  .mixin(12);
}
.class2 {
  .mixin(6);
}
// 转译为↓

.class1 {
  background-color: black;
}
.class2 {
  background-color: white;
}

// 并且提供了很多类型检查函数来辅助条件表达式
// 例如：iscolor、isnumber、isstring、iskeyword、isurl等等。
.mixin (@a) when (iscolor(@a)) {
  background-color: black;
}

// 另外，LESS的条件表达式同样支持AND和OR以及NOT来组合条件表达式
// 这样可以组织成更为强大的条件表达式。
// 需要特别指出的一点是，OR在LESS中并不是or关键词
// 而是用来表示or的逻辑关系。
.math (@a) when (@a > 10) and (@a < 20) {
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  • Stylus 的条件语句和其他编程语言的条件语句非常相似，可省略大括号
pad(types = margin padding, n = 5px)
  padding unit(n, px) if padding in types
  margin unit(n, px) if margin in types

body
  pad()
// 等同于↓
body{
	padding: 5px;
	margin: 5px;
}

body
  pad(margin)
// 等同于
body{
	margin: 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 循环语句

  • Sass 的循环语句

    Sass 中使用 for 循环语句需要使用@for，并且配合“from”和“through”一起使用

    Sass 中循环语句除了@for 语句之外，还有@each 语句和@while 语句

// for 循环
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
// 等同于↓
.item-1 {  width: 2em; }
.item-2 {  width: 4em; }
.item-3 {  width: 6em; }

// each 循环
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
// 等同于↓
.puma-icon {  background-image: url('/images/puma.png'); }
.sea-slug-icon {  background-image: url('/images/sea-slug.png'); }
.egret-icon {  background-image: url('/images/egret.png'); }
.salamander-icon {  background-image: url('/images/salamander.png')	}

// while 循环
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
// 等同于↓
.item-6 {
	width: 12em;
}
.item-4 {
	width: 8em;
}
.item-2 {
	width: 4em;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

  • Less 的循环语句

    在 LESS 语言中并没有现在的循环语句，可是像其条件语句一样，通过 when 来模拟出他的循环功能。

.loopingClass (@index) when (@index > 0) {
  .myclass {
    z-index: @index;
  }
  // 递归
  .loopingClass(@index - 1);
}
// 停止循环
.loopingClass (0) {
}

// 输出
.loopingClass (3);

// 等同于↓

.myclass {
  z-index: 3;
}
.myclass {
  z-index: 2;
}
.myclass {
  z-index: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  • Stylus 的循环语句

    在 Stylus 样式中通过 for/in 对表达式进行循环

body
  fonts = Impact Arial sans-serif
  for font, i in fonts
    foo i font
// 等同于↓
body {
 foo: 0 Impact;
 foo: 1 Arial;
 foo: 2 sans-serif;
}
1
2
3
4
5
6
7
8
9
10
11
上次编辑于: 2025年7月10日 04:01
贡献者: HugStars

媒体查询

@ 2025 by 𝓗𝓾𝓰𝓢𝓽𝓪𝓻𝓼