上一篇學完了Sass基礎部分，這次要學習的是Sass的高級部分砖瞧。
條件語句
在Sass中也有條件判斷的語句息堂，用法為@if boolean和@else，可以配合混合宏傳進來的參數(shù)來進行選擇輸出，在if的后面可以跟判斷語句荣堰，不需要括號床未。
@mixin blockOrHidden($boolean:true) {
@if $boolean {
display: block;
}
@else {
display: none;
}
}
p {
@if 2 + 3 == 5 { border: 1px solid; }
@if 10 < 5 { border: 2px dotted; }
}
循環(huán)語句
在sass中支持for循環(huán)，while循環(huán)振坚，each循環(huán)薇搁。
for循環(huán)
for循環(huán)有兩種形式，分別為：
@for $var from <start> through <end>
@for $var from <start> to <end>
$i表示變量渡八，start表示起始值啃洋，end表示結束值，這兩個的區(qū)別是關鍵字through表示包括end這個數(shù)屎鳍，而to（包含頭不包含尾）則不包括end這個數(shù)宏娄。
/* i的值為1-3 */
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
/* i的值為1-2 */
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
while循環(huán)
while循環(huán)和if相似，后面可以跟判斷語句逮壁。
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}
each循環(huán)
在sass中也有each循環(huán)孵坚，語法如下@each $var in <list>。
list是一個列表貌踏，也可以理解為數(shù)組十饥。
$list: adam john wynn mason kuroir;
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
...
}
}
}
函數(shù)
sass提供一些函數(shù)功能，如下祖乳。
- 字符串函數(shù)
- 數(shù)字函數(shù)
- 列表函數(shù)
- 顏色函數(shù)
- Introspection 函數(shù)
- 三元函數(shù)等
字符串函數(shù)
字符串函數(shù)顧名思意是用來處理字符串的函數(shù)逗堵。Sass 的字符串函數(shù)主要包括兩個函數(shù)：
- quote($string)：給字符串添加引號。
- unquote($string)：刪除字符串中的引號眷昆。
- To-upper-case()：函數(shù)將字符串小寫字母轉換成大寫字母蜒秤。
- To-lower-case()：函數(shù)將字符串大寫字母轉換成小寫字母。
quote用法：
/* scss文件 */
.test1 {
content: quote('Hello Sass!');}
.test2 {
content: quote("Hello Sass!");}
.test3 {
content: quote(ImWebDesigner);}
.test4 {
content: quote(' ');}
/* -------css文件------- */
.test1 {
content: "Hello Sass!";
}
.test2 {
content: "Hello Sass!";
}
.test3 {
content: "ImWebDesigner";
}
.test4 {
content: " ";
}
使用 quote() 函數(shù)只能給字符串增加雙引號亚斋，而且字符串中間有單引號或者空格時作媚，需要用單引號或雙引號括起，否則編譯的時候將會報錯帅刊。
同時 quote() 碰到特殊符號纸泡，比如： !、?赖瞒、> 等女揭，除中折號 - 和 下劃線_ 都需要使用雙引號括起，否則編譯器在進行編譯的時候同樣會報錯栏饮。
unquote用法：
/* scss文件 */
.test1 {
content: unquote('Hello Sass!');}
.test2 {
content: unquote("'Hello Sass!");}
.test3 {
content: unquote("I'm Web Designer");}
.test4 {
content: unquote("'Hello Sass!'");}
.test5 {
content: unquote('"Hello Sass!"');}
.test6 {
content: unquote(Hello Sass);}
/* -------css文件------- */
.test1 {
content: Hello Sass!;
}
.test2 {
content: 'Hello Sass!;
}
.test3 {
content: I'm Web Designer;
}
.test4 {
content: 'Hello Sass!';
}
.test5 {
content: "Hello Sass!";
}
.test6 {
content: Hello Sass;
}
從測試的效果中可以看出吧兔，unquote( ) 函數(shù)只能刪除字符串最前和最后的引號（雙引號或單引號），而無法刪除字符串中間的引號袍嬉。如果字符沒有帶引號境蔼，返回的將是字符串本身灶平。
To-upper-case用法：
/* scss文件 */
.test {
text: to-upper-case(aaaaa);
text: to-upper-case(aA-aAAA-aaa);
}
/* -------css文件------- */
.test {
text: AAAAA;
text: AA-AAAA-AAA;
}
To-lower-case用法：
/* scss文件 */
.test {
text: to-lower-case(BBBBB);
text: to-lower-case(bB-bBBB-bbb);
}
/* -------css文件------- */
.test {
text: bbbbb;
text: bb-bbbb-bbb;
}
數(shù)字函數(shù)
- percentage($value)：將一個不帶單位的數(shù)轉換成百分比值。
- round($value)：將數(shù)值四舍五入箍土，轉換成一個最接近的整數(shù)逢享。
- ceil($value)：向上取整數(shù)（進一法）。
- floor($value)：向下去整數(shù)涮帘。
- abs($value)：返回一個數(shù)的絕對值拼苍。
- min($numbers…)：找出幾個數(shù)值之間的最小值。
- max($numbers…)：找出幾個數(shù)值之間的最大值调缨。
- random(): 獲取隨機數(shù)疮鲫。
percentage()用法：
/* scss文件 */
.footer {
margin: percentage(.5);
}
/* -------css文件------- */
.footer {
margin: 50%;
}
round() 用法：
/* scss文件 */
.nav{
width:round(11.2px);
}
/* -------css文件------- */
.nav {
width: 11px;
}
ceil() 用法：
/* scss文件 */
.error {
width: ceil(-10.6)+px;
}
.success {
width: ceil(10.6)+px;
}
/* -------css文件------- */
.error {
width: -10px; // 進一法，因為-10比-10.6大
}
.success {
width: 11px;
}
floor()向下取整數(shù)弦叶，和ceil()相反：
/* scss文件 */
.error {
width: floor(-10.6)+px;
}
.success {
width: floor(10.6)+px;
}
/* -------css文件------- */
.error {
width: -11px; // 向下與取整俊犯，-11比-10.6小
}
.success {
width: 10px;
}
abs( ) 函數(shù)會返回一個數(shù)的絕對值。
/* scss文件 */
.footer {
width:abs(-12.3px);
}
/* -------css文件------- */
.footer {
width: 12.3px;
}
min() 用法：
/* scss文件 */
.error {
width: min(1em,2em,6em);
}
/* -------css文件------- */
.error {
width: 1em;
}
max()用法：
/* scss文件 */
.error {
width: max(1em,2em,6em);
}
/* -------css文件------- */
.error {
width: 6em;
}
random()用法：
/* scss文件 */
.error {
width: random();
}
/* -------css文件------- */
.error {
width: 0.22617;
}
sass@規(guī)則
@import
Sass 擴展了 CSS 的 @import 規(guī)則伤哺，讓它能夠引入 SCSS 和 Sass 文件燕侠。所有引入的 SCSS 和 Sass 文件都會被合并并輸出一個單一的 CSS 文件。另外立莉，被導入的文件中所定義的變量或 mixins 都可以在主文件中使用绢彤。
@import 根據(jù)文件名引入。默認情況下蜓耻，它會尋找 Sass 文件并直接引入茫舶，但是，在少數(shù)幾種情況下刹淌，它會被編譯成 CSS 的 @import 規(guī)則：
- 如果文件的擴展名是 .css饶氏。
- 如果文件名以 http:// 開頭。
- 如果文件名是 url()有勾。
- 如果 @import 包含了任何媒體查詢（media queries）。
注意：在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件蔼卡。 例如喊崖， _colors.scss 不能與 colors.scss 并存。
@media
在 sass 中的 @media 指令和 CSS 的使用規(guī)則一樣的簡單雇逞，但它有另外一個功能荤懂，可以嵌套在 CSS 規(guī)則中，但在編譯時會跳出嵌套喝峦，重新整合屬性势誊。
/* scss文件 */
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
/* -------css文件------- */
.sidebar {
width: 300px;
}
/* 跳出嵌套 */
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@at-root
@at-root 從字面上解釋就是跳出根元素呜达。當你選擇器嵌套多層之后谣蠢，想讓某個選擇器跳出，此時就可以使用 @at-root。
/* scss文件 */
.a {
.b {
.c {
@at-root .d {
color: green;
}
}
}
}
/* -------css文件------- */
.d {
color: green;
}
