scss代碼的重用

變量

$ 符號來標識變量；把反復使用的css屬性值定義成變量；

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 變量中可存在變量

a {
  color: $link_color; // 中划線和下划線等價，包括對混合器和Sass函數的命名
}

繼承

繼承是基於類class的（有時是基於其他類型的選擇器）

允許一個選擇器，繼承另一個選擇器。比如，現有class1：

.class1 {
border: 1px solid #ddd;}

// class2要繼承class1，就要使用@extend命令：

.class2 {
     @extend .class1;
     font-size:120%;
 }

混合器Mixin

避免不停地重復一段樣式（定義：@mixin、引用：@include）

// 使用@mixin命令，定義一個代碼塊。
@mixin left {
　　float: left;
　　margin-left: 10px;
}
//使用@include命令，調用這個mixin。
div {
　　@include left;
}
　　
// mixin的強大之處，在於可以指定參數和缺省值。
@mixin left($value: 10px) {
　　float: left;
　　margin-right: $value;
}
// 使用的時候，根據需要加入參數：
div {
　　@include left(20px);
}

插入文件

Sass 拓展了 @import 的功能，允許其導入 SCSS 或 Sass 文件。被導入的文件將合並編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。

@import "foo.scss"; //都會導入文件 foo.scss
@import "foo"; //都會導入文件 foo.scss
@import "http://foo.com/bar";  // 插入外部文件
@import "foo.css"; // 等同於css的import命令

scss總結

 這里只是簡單介紹 scss 最基本部分,使用 scss 可以編寫清晰、無冗余、語義化的 css。

變量是 scss 提供的最基本的工具。通過變量可以讓獨立的 css 值變得可重用，無論是在一條單獨的規則范圍內還是在整個樣式表中。

變量、混合器的命名甚至 scss 的文件名，可以互換通用_和-。

同樣基礎的是 scss 的嵌套機制。嵌套允許css規則內嵌套css規則，減少重復編寫常用的選擇器，同時讓樣式表的結構一眼望去更加清晰。scss同時提供了特殊的父選擇器標識符 & ，通過它可以構造出更高效的嵌套。

混合器允許用戶編寫語義化樣式的同時避免視覺層面上樣式的重復。使用混合器減少重復，使用混合器讓你的css變得更加可維護和語義化。

與混合器相輔相成的選擇器繼承。繼承允許你聲明類之間語義化的關系，通過這些關系可以保持你的css的整潔和可維護性。

樣式導入，scss 的另一個重要特性。通過樣式導入可以把分散在多個sass文件中的內容合並生成到一個css文件，避免了項目中有大量的css文件通過原生的css @import帶來的性能問題。通過嵌套導入和默認變量值，導入可以構建更強有力的、可定制的樣式。