Sass——@-Rules 與指令

Sass 支援所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）

CSS3 @-Rules    @import——css中通過@import匯入css檔案時，將增加http請求次數，scss中執行該指令將匯入其他scss檔案再編譯在同一個css檔案，這樣不會增加http請求的次數，如果在scss檔案中用@import匯入css檔案效果跟在css檔案中匯入一樣，他們並不會編譯成一個css檔案

@import "reset.css";@import "file.scss";p {  background: #0982C1;}/*編譯成css*/@import "reset.css";body {                    //body 是從reset.css檔案中匯入的  background: #EEE;}p {  background: #0982C1;}

    @media
    @extend 

——將一個選取器的樣式繼承到另一個選取器上

.common{font-size:12px;color:#eee;}p{@extend .common;//繼承.common 所有樣式margin:20px;}a{@extend .common;margin:10px;}/*編譯為css*/.common, p, a {font-size: 12px;  color: #eee; }p {  margin: 20px; }a {  margin: 10px; }

Sass 特有的 “指令”（directives）    控制指令 (Control Directives)

——主要與混合指令 (mixin) 配合使用，尤其是在 Compass 等樣式庫中

        @if       
 @if 可單獨使用也可跟@else if 和@ else 一起使用

$num:5;div{@if $num == 1{z-index:$num;}@else if $num == 2{z-index:2;}@else{z-index:5;}}/*編譯為css*/div {  z-index: 5; }

        @forsass中的@for迴圈語句要配合”from“和”through“一起使用——@for $var form X through Y {語句塊} //當X==Y時，沒有輸出任何樣式，不起作用

@for $i from 2 through 3 {.item-#{$i} { z-index:$i;}}/*轉換為css*/.item-2 {  z-index: 2; }.item-3 {  z-index: 3; }

        @each與in一起使用——@each $var in <list> {語句塊}

@each $i in 1, 2, 3, 4{.item-#{$i}{z-index:$i;}}/*編譯為css*/.item-1 {  z-index: 1; }.item-2 {  z-index: 2; }.item-3 {  z-index: 3; }.item-4 {  z-index: 4; }

        @while

$i:1;@while $i <= 3{.item-#{$i}{z-index:$i;}$i:$i+1;}/*編譯為css*/.item-1 {  z-index: 1; }.item-2 {  z-index: 2; }.item-3 {  z-index: 3; }

    混合指令 (Mixin Directives)

——用於定義可重複使用的樣式，Mixins可以將一部分共有的樣式抽出，作為單獨定義的模組，被很多選取器重複使用。混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過參數功能引入變數，輸出多樣化的樣式，參數可以帶預設值。通過mixin定義的混合指令，要通過@include指令引用樣式。

        @mixin 定義混合指令——這裡不帶預設值的參數要在mixin參數列表中先申明，帶預設值的要後申明，否則將出錯。        @include 引用混合樣式

@mixin btnStyle($color,$width:60px,$height:30px){width:$width;height:$height;line-height:$height;text-align:center;color:$color;}li {@include btnStyle(#eee,50px);}/*編譯為css*/li {  width: 50px;  height: 30px;  line-height: 30px;  text-align: center;  color: #eeeeee; }

        參數 (Arguments)        向混合樣式中匯入內容 (Passing Content Blocks to a Mixin)函數指令 (Function Directives)

——Sass 允許自訂函數作用於任何值或者字串，例如：

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
結果：
#sidebar {
width: 240px; }
輸出樣式 (Output Style)

——Sass 支援多種輸出樣式，滿足不同的需求。通過 :style 選項設定輸出樣式，或者在命令列中使用 --style 命令。

 :nested
 :expanded
 :compact
 :compressed