Sass 和 SCSS

Sass 和 SCSS 是 Sass (Syntactically Awesome Stylesheets) 的两种语法。它们都被用于编写更加结构化和易于维护的 CSS。以下是它们在语法和特性上的主要对比：

1. 语法格式

Sass (缩进语法)

• 没有花括号 {} 和分号 ;。
• 使用缩进来表示嵌套和层次关系。

nav
  ul
    margin: 0
    padding: 0
  li
    display: inline-block
    margin-right: 5px
1
2
3
4
5
6
7

SCSS (Sassy CSS)

• 类似于标准的 CSS，使用花括号 {} 和分号 ;。
• 兼容所有现有的 CSS 代码。

nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 5px;
  }
}
1
2
3
4
5
6
7
8
9
10

2. 变量

两者都支持变量，语法一致：

$primary-color: #333;

nav {
  color: $primary-color;
}
1
2
3
4
5

3. 嵌套

两者都支持嵌套，但在 Sass 中，嵌套使用缩进，而在 SCSS 中使用花括号：

// Sass
nav
  ul
    margin: 0
    padding: 0

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4. 混合器 (Mixins)

混合器的定义和调用在两者中相同：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
1
2
3
4
5
6
7
8

5. 插值

插值在两者中的用法相同：

$side: left;
.margin-#{$side} {
  margin-#{$side}: 10px;
}
1
2
3
4

6. 运算

两者都支持在样式中进行运算：

.container {
  width: 100% - 20px;
}
1
2
3

7. 继承

两者都支持样式继承：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

下次项目中用到它们的时候再在此补充！