[SCSS]

SCSS（Sassy CSS）是一种 CSS 预处理语言，它扩展了 CSS 的功能并且提供了更多程序化的特性。SCSS 通过 Sass（Syntactically Awesome Style Sheets）来处理，Sass 是一个成熟、稳定、且强大的 CSS 扩展语言。SCSS 让你可以使用变量、嵌套规则、混入（mixins）、继承以及更多有助于编写可维护和重用的样式表的功能。

主要特性

1. 变量

你可以存储一些经常使用的样式值，如颜色、字体或任何 CSS 值，并且通过一个方便的名称来重用它们。这让你的 CSS 代码更容易维护和更新。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. 嵌套

SCSS 允许你使用嵌套语法，让 CSS 规则的结构更清晰和更紧凑。这样的方式使得继承父选择器的制定更为直观。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. 混入

混入允许你创建可复用的代码块，并且可以包含全部的 CSS 属性。

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

.box { @include border-radius(10px); }

4. 导入

SCSS 提供了一个更加强大的 @import 规则，它允许你导入其他样式表文件，这有助于你组织和模块化你的样式代码。

5. 继承

使用 @extend，你可以让一个选择器继承另一个选择器的样式。这是一个简单强大的方式来避免重复代码，并保持样式表的整洁和可读性。

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

6. 控制指令

SCSS 提供了一些编程结构如条件语句和循环，这些可以用来动态生成样式。

@for $i from 1 through 10 {
  .border-#{$i} { border-width: #{$i}px; }
}

SVG的属性