前言
sass一個(gè)css后置處理器疆栏，減少了開發(fā)人員的輸入贬媒，極大地提升了開發(fā)效率，所以有必要花點(diǎn)時(shí)間學(xué)習(xí)下绷旗， 上手很快喜鼓，先來學(xué)習(xí)下基本的擴(kuò)展內(nèi)容
嵌套規(guī)則
內(nèi)層的樣式將它外層的選擇器作為父選擇器，看例子
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
父選擇器 &
當(dāng)需要直接使用嵌套外層的父選擇器時(shí)衔肢，可使用 & 進(jìn)行連接
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
屬性嵌套
有些 CSS 屬性遵循相同的命名空間 (namespace)庄岖，比如 font-family, font-size, font-weight 都以 font 作為屬性的命名空間。 看例子
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
變量$
變量支持塊級(jí)作用域角骤， 嵌套規(guī)則內(nèi)定義的變量只能在規(guī)則內(nèi)使用(局部變量) , 若要轉(zhuǎn)換為全局變量需添加 !global聲明
$width: 20px; // 全局變量
#main {
$height: 50px !global; // 局部變量
width: $width
}
#sidebar {
height: $height;
}
插值語句 #{}
通過 #{} 插值語句可以在選擇器或?qū)傩悦惺褂米兞?/p>
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
變量定義 !default
在變量的結(jié)尾添加 !default 給一個(gè)未通過 !default 聲明賦值的變量賦值隅忿，此時(shí)，如果變量已經(jīng)被賦值，不會(huì)再被重新賦值背桐，但是如果變量還沒有被賦值刘陶，則會(huì)被賦予新的值
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
@import
導(dǎo)入其他的scc文件，Sass 將會(huì)試著尋找文件名相同牢撼，拓展名為 .scss 或 .sass 的文件并將其導(dǎo)入
// 單個(gè)文件導(dǎo)入
@import "foo.css";
// 多個(gè)文件導(dǎo)入
@import "rounded-corners", "text-shadow";
導(dǎo)入嵌套@import匙隔，可以將@import 嵌套進(jìn)css或@media中，這樣導(dǎo)入的樣式只會(huì)出現(xiàn)在嵌套的層中
@extend
將一個(gè)選擇器下的所有樣式繼承給另一個(gè)選擇器
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
當(dāng)需要定義一套樣式并不是給某個(gè)元素熏版，而只是通過@extend指令使用時(shí)纷责，需要使用到@extend-Only選擇器
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
@at-root
@at-root指令導(dǎo)致一條或多條規(guī)則在文檔的根位置發(fā)出，而不是嵌套在它們的父選擇器下面
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}
