sass使用參考文檔
內容提要
- 變量
- 嵌套
- 占位符選擇器 %
- @mixin
- 運算
- @if
- @for
- @each
- @extend
- @import
正文
1、變量
//定義變量:聲明變量以$開 $baseColor:#ff9000; //使用變量 .box{ font-size:12px; color:$baseColor; } //若變量需要鑲嵌在字符串中,變量寫在#{$el}中 //如:margin-#{$el}:10px; //.box#{$el} {...} $bgURL:‘../../../img/work/‘; .box { background-image: url(#{$bgURL}crumbs.png); }
變量支持塊級作用域
,嵌套規則內定義的變量只能在嵌套規則內使用(局部變量),不在嵌套規則內定義的變量則可在任何地方使用(全局變量)。將局部變量轉換為全局變量
可以添加!global
聲明:
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width; //5em
}
可以在變量的結尾添加!default
給一個未通過 !default 聲明賦值的變量賦值,此時,如果變量已經被賦值,不會再被重新賦值,但是如果變量還沒有被賦值,則會被賦予新的值。
$content: "First content"; $content: "Second content?" !default; $new_content: "First time reference" !default; #main { content: $content; new-content: $new_content; } //編譯為 #main { content: "First content"; new-content: "First time reference"; }
2、嵌套
- 選擇器嵌套
使用嵌套增強了結構性和可讀性,可以用&
表示父選擇器
(臨近的最外層)。嵌套建議不超過3層以上;
.box{ color:red; &:hover{ //相當於.box:hover{} color:blue; } } //& 必須作為選擇器的第一個字符,其後可以跟隨後綴生成復合的選擇器 #main { color: black; &-sidebar { //相當於 #main-sidebar {} border: 1px solid; } }
- 屬性嵌套
有些屬性擁有同一個開始的單詞,如:
.box{
border:{
color:red;
width:1px;
style:solid;
}
}
//編譯為
.box{
border-color:red;
border-width:1px;
border-style:solid;
}
3、占位符選擇器 %
與常用的 id 與 class 選擇器寫法相似,只是 # 或 . 替換成了 %。必須通過 @extend 指令調用。
優勢:不調用時不會有多余的css文件。
%fl{
float:left;
}
.box{
@extend %fl;
}
4、@mixin
//定義
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
//使用
p { @include sexy-border(blue, 1px); }
//編譯為
p {
border-color: blue;
border-width: 1px;
border-style: dashed; }
//也可使用參數個默認值
@mixin sexy-border($color, $width: 1px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2px); }
為便於書寫,@mixin 可以用 = 表示,而 @include 可以用 + 表示
5、運算
- 數字運算
SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %),如果必要會在不同單位間轉換值。
關系運算 <, >, <=, >= 也可用於數字運算,相等運算 ==, != 可用於所有數據類型。
- 字符串運算
+
可用於連接字符串
註意,如果有引號字符串(位於 + 左側)連接無引號字符串,運算結果是有引號的,相反,無引號字符串(位於 + 左側)連接有引號字符串,運算結果則沒有引號。
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
//編譯為
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
如果需要使用變量,同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中,只需要用 #{} 插值語句將變量包裹。
6、@if
當 @if 的表達式返回值不是 false 或者 null 時,條件成立,輸出 {} 內的代碼:
$type: 3;
p {
@if $type == 1 {
color: blue;
} @else if $type == 2 {
color: red;
} @else if $type == 3 {
color: green;
} @else {
color: black;
}
}
//結果
p { color: green; }
@if 聲明後面可以跟多個 @else if 聲明,或者一個 @else 聲明。
7、@for
@for 指令可以在限制的範圍內重復輸出格式
,每次按要求(變量的值)對輸出結果做出變動。這個指令包含兩種格式:@for $var from <start> through <end>
,或者@for $var from <start> to <end>
,區別在於 through 與 to 的含義:當使用 through
時,條件範圍包含 <start> 與 <end> 的值
,而使用 to
時條件範圍只包含 <start> 的值不包含 <end> 的值
。另外,$var 可以是任何變量,比如 $i;。
@for $i from 1 through 3 { //1-3
.item-#{$i} { width: 2em * $i; }
}
@for $i from 1 to 3 { //1-2
.item-#{$i} { width: 2em * $i; }
}
8、@each
@each 指令的格式是 $var in <list>
, $var 可以是任何變量名,比如 $length 或者 $name,而
//數組 list類型
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png‘);
}
}
.puma-icon {
background-image: url(‘/images/puma.png‘); }
.sea-slug-icon {
background-image: url(‘/images/sea-slug.png‘); }
.egret-icon {
background-image: url(‘/images/egret.png‘); }
.salamander-icon {
background-image: url(‘/images/salamander.png‘); }
//對象 maps類型
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
nth
函數可以直接訪問數組中的某一項;join
函數可以將多個數組連接在一起;append
函數可以在數組中添加新值;
9、@extend
功能:將一個選擇器下的所有樣式繼承給另一個選擇器。
.fl{
float:left;
}
.box{
width:200px;
@extend .fl;
}
//編譯為
.box{
width:200px;
}
.fl,.box{
float:left;
}
10、@import
Sass 拓展了 @import 的功能,允許其導入 SCSS 或 Sass 文件。被導入的文件將合並編譯到同一個 CSS 文件中,另外,被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。
通常,@import 尋找 Sass 文件並將其導入,但在以下情況下,@import 僅作為普通的 CSS 語句,不會導入任何 Sass 文件。
- 文件拓展名是 .css;
- 文件名以 http:// 開頭;
- 文件名是 url();
- @import 包含 media queries。
Sass 允許同時導入多個文件,例如同時導入base1 與 base2 兩個文件:
@import "base1", "base2";
大多數情況下,一般在文件的最外層(不在嵌套規則內)使用 @import,其實,也可以將 @import 嵌套進 CSS 樣式或者 @media 中,與平時的用法效果相同,只是這樣導入的樣式只能出現在嵌套的層中。
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。
以上是對開發中常用sass的一些總結,更詳細內容可移步 sass中文文檔。
sass使用參考文檔