SASS 學習筆記 II
上篇筆記，SASS 學習筆記 中包含：
-
配置
-
變量
-
嵌套
這里加一個擴展，嵌套中有一個
&的用法，使用&可以指代當前 block 中的 selector，后面可以追加其他的選擇器。如當前的 scope 是form，可以在嵌套中使用&-selector指代form-selector，如：HTML 有：
<!-- Navbar --> <nav class="navbar"><div class="navbar-navigation"><div class="navbar-navigation-left"></div><div class="navbar-navigation-right"></div></div> </nav> <!-- End of Navbar -->scss 寫：
.navbar {&-navigation {&-left {}&-right {}} } -
擴展
-
mixin
-
function
-
placeholder selector
-
import & partials
這部分就這剩下的一些特性/功能去學習一下，過了一遍剩下的內容，SCSS 也差不多學完了。
SCSS 高級特性
數據類型
-
數字
這個基本是數字單位，如 100px，100%，100，0.1 等
-
字符串
這個常用于字體類和 string interpolation，如
font-family: 'Arial'，string interpolation 下面會說 -
顏色
hex、hsl、rgb 這種
-
布爾值
-
list
SCSS 中的 list 一般用逗號做分隔符，不過有些和 css 一致的可以用空格，如：
// 不用字符串 sass 會提示報錯，node-sass好像沒什么問題就是了 $colors: 'red', 'orange'; $box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -
map
用法如下：
$colors: (primary: red,secondary: green,tertiary: blue, );// 獲取方式使用內置的 map-get html {background-color: map-get($colors, primary); }我個人覺得 map 獲取單一值的意義不大，不過搭配上變量+循環/if 進行配置之類的倒是很方便。
-
null
一般不存在的值 SCSS 默認就是 null，出現獲取/使用 null 的時候，終端也會報錯。
-
特殊
global, selector 和 function
interpolation
interpolation 就是一個將變量、表達式或選擇器轉換成一個字符串的方式，語法就是使用 #{}，使用方法有：
$color: red;body {color: #{$color};
}$selector: '.button';
#{$selector}: {background-color: #{$color};
}
同樣，這種搭配循環/if 很好用。
for 循環
語法為：@for $i from <start> through <end> {} 或 @for $i from <start> to <end> {}，前者包含 end，后者不包。
同樣搭配上面介紹過的一些特性會比較好用，如：
$colors2: (1: red,2: green,3: blue,4: orange,
);// @for $i from 1 to 4, 4 is exclude
@for $i from 1 through 4 {.paragraph-#{$i} {background-color: map-get($map: $colors2, $key: $i);}
}
編譯后的結果為：
.paragraph-1 {background-color: red;
}.paragraph-2 {background-color: green;
}.paragraph-3 {background-color: blue;
}.paragraph-4 {background-color: orange;
}
each 循環
有點像 JS 的 for each，如果只是想獲取 list 中的值，用 @each 會方便一些，也可以不需要用 map-get。
如上面的循環用 each 的寫法為：
@each $i, $c in $colors2 {.paragraph-#{$i} {background-color: #{$c};}
}
這里不使用解構的方法也可以用 nth() 實現，如：
@each $item in $colors2 {.paragraph-#{nth($item, 1)} {background-color: #{nth($item, 2)};}
}
就是沒這么方便。
if
也是 if/else-if/else 的用法，我覺得這種用在 media query 特別的方便。
案例
slideshow
這個主要還是用 animation 來實現的，不過使用 SCSS 的循環確實很方便，原生 CSS 定義 delay 的寫法為：
.slideshow-slide:nth-child(1) {animation-delay: 0s;
}
.slideshow-slide:nth-child(2) {animation-delay: 4s;
}
.slideshow-slide:nth-child(3) {animation-delay: 8s;
}
.slideshow-slide:nth-child(4) {animation-delay: 12s;
}
.slideshow-slide:nth-child(5) {animation-delay: 16s;
}
使用 SCSS 的寫法：
$animList: 1 0s, 2 4s, 3 8s, 4 12s, 5 16s;@each $item in $animList {.slideshow-slide:nth-child(#{nth($item, 1)}) {animation-delay: nth($item, 2);}
}
或者
$animList: 1, 2, 3, 4, 5;@each $item in $animList {.slideshow-slide:nth-child(#{$item}) {animation-delay: #{($item - 1) * 4}s;}
}
同樣的寫法也可以搭配 nth-child：
$socialMediaColors: 1 #3b5998, 2 #b31217, 3 #dc4e41, 4 #55acee, 5 #517fa4, 6#0077b5;@each $color in $socialMediaColors {.social-icons-item:nth-child(#{nth($color, 1)}) .social-icons-link {color: nth($color, 2);border: 0.1rem solid nth($color, 2);}
}
最終完成的效果：
media query
media query 主要依賴 mixin，用法如下：
@mixin response($breakpoint) {@if ($breakpoint == xl) {@media (max-width: 1200px) {@content;}} @else if ($breakpoint == lg) {@media (max-width: 1000px) {@content;}} @else if ($breakpoint == md) {@media (max-width: 760px) {@content;}} @else if ($breakpoint == sm) {@media (max-width: 560px) {@content;}}
}html {font-size: 62.5%;@include response(md) {font-size: 56.25%;}@include response(sm) {font-size: 50%;}
}
)
