Sass學習筆記

1. 全域性變數

p

background-color
:$color;
//red
span
}div

//第二種，使用前面定義的值

$color
:red;
//變數申明帶有!default，但是前面還有這個變數的申明
$color
:blue !default;
p

$btnclass: btn !default;

$borderdirection: top !default;
.#:1px solid #ccc;
}

.btn

5. @mixin和%

1.@content

常用於定義media-queries，keyframes，瀏覽器相容

@mixin

header
}@include
header
}

#header

#header
.logo

@each

$prefix
in$prefixes : $value;
}...
@else ";
}}

繼承，呼叫%

//sass style

//-------------------------------
h1.speaker
//css style
//-------------------------------
h1,.speaker
.speaker

組合申明

%center-block 

#header
.gallery

#header, .gallery

#header
.gallery

Sass學習筆記

安裝 2.開啟ruby的命令視窗 start command prompt with ruby 輸入gem install sass gem install sass pre 要安裝beta版本的 gem update sass 公升級sass vsass hgit安裝 git clone git ...

Sass學習筆記。

定義 css預處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為css增加了一些程式設計的特性，將css作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。採用ruby語言編寫的一款css預處理語言 副檔名 sass 嚴格的縮排式語法 scss 與平時css語法書寫類似 scs...

sass學習筆記

2 安裝haml sass 開啟ruby的命令符面板，輸入 gem install haml 和 gem install sass 3 進入相應的檔案中,執行命令 sass test.scss test.css sass style compressed nested compact expande...