1. 变量
Sass 允许通过 $ 符号来定义变量，存储需要复用的信息，例如颜色、字体等。变量让样式的复用性增强，同时提升了代码的可维护性。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
2. 嵌套
Sass 支持嵌套 CSS 规则，这种方式让代码结构更清晰。不过，建议谨慎使用嵌套，过度嵌套会导致生成的 CSS 难以维护。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
3. 引入（Import）
Sass 的 @import 指令允许将样式代码分割成多个文件，并在需要时引入。与原生 CSS 的 @import 不同，Sass 的导入不会增加 HTTP 请求，而是直接将引入的样式合并到最终的 CSS 文件中。
// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
4. 混合（Mixin）
Mixin 用来定义可复用的 CSS 代码块，并允许传递参数来生成灵活的样式，特别适合处理浏览器兼容性问题。
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
5. 继承（Extend）
Sass 的 @extend 指令允许一个选择器继承另一个选择器的样式，从而减少代码冗余。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-common;
}
.success {
@extend %message-common;
border-color: green;
}
.error {
@extend %message-common;
border-color: red;
}
6. 操作符
Sass 支持标准的算术运算符，使得样式中的数值计算更加简洁直观。
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
7. 引用父级选择器（&）
& 用来引用父级选择器，常用于嵌套规则中，生成伪类和复合选择器等。
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
8. 嵌套属性
在 Sass 中，属性可以嵌套在同一个命名空间下，减少重复书写。
.demo {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
总结：
Sass 和 SCSS 提供了强大的功能来优化 CSS 的编写方式，如变量、嵌套、Mixin、继承等。这些特性极大地增强了代码的可读性、复用性和维护性，使得复杂的样式管理变得更加高效。在实际开发中，合理使用这些特性，可以帮助开发者编写更加简洁、可扩展的样式表。
