Sass
Sass 全稱 "Syntactically Awesome StyleSheets", 是 CSS 的一種擴展語言，
變數 Variable
Sass 允許使用變數（最新的 CSS 也支持了變數）， 可以在 Sass 中宣告變數，并為它賦值，
在 Sass 中，變數以 $ 開頭的，后跟變數名，
$text-color: red;
使用
color: $text-color;
嵌套 CSS Nest
Sass 允許 CSS 規則的嵌套，這在組織樣式表結構的時候會很有用，
在 CSS 里，每個元素的樣式都需要寫在獨立的代碼塊中，如下所示：
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
對于一個大型專案，CSS 規則會很復雜， 這時，引入嵌套功能（即在對應的父元素中寫子元素的樣式）可以有效地簡化代碼：
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
Mixins 可重用 CSS Reusable
在 Sass 中，mixin 是一組 CSS 宣告，可以在整個樣式表中重復使用，
CSS 的新功能需要一段時間適配后，所有瀏覽器后才能完全使用， 隨著瀏覽器的不斷升級，使用這些 CSS 規則時可能需要添加瀏覽器前綴， 考慮 box-shadow：
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
對于所有具有 box-shadow 屬性的元素重寫此規則，或者更改每個值以測驗不同的效果，需要花費大量的精力， Mixins 就像 CSS 的函式， 以下是一個例子：
@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
定義以 @mixin 開頭，后跟自定義名稱， 引數（$x，$y，$blur，以及上例中的 $c ）是可選的， 現在在需要 box-shadow 規則的地方，只需一行 mixin 呼叫而無需添加所有的瀏覽器前綴， mixin 可以通過 @include 指令呼叫，
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
@if @else 邏輯
Sass 中的 @if 指令對于測驗特定情況非常有用——它的作業方式與 JavaScript 中的 if 陳述句類似，
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
類似 JavaScript，可以在 Sass 中使用 @else if 和 @else 測驗更多條件：
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
@for 回圈
在 Sass 中使用 @for 回圈添加樣式，它的用法和 JavaScript 中的 for 回圈類似，
@for 以兩種方式使用：“開始 through 結束” 或 “開始 to 結束”， 主要區別在于“開始 to 結束”不包括 結束數字，而“開始 through 結束”包括 結束數字，
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
@for $i from 1 to 6{
.text-#{$i} {
font-size: 15px * $i;
}
}
#{$i} 部分是將變數（i）與文本組合成字串的語法， 當 Sass 檔案轉換為 CSS 時，它看起來像這樣：
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}
這是創建網格布局的有效方法，
@each 遍歷串列
Sass 還提供 @each 指令，該指令回圈遍歷串列或映射中的每個專案， 在每次迭代時，變數將從串列或映射分配給當前值，
@each $color in blue, red, green {
.#{$color}-text {
color: $color;
}
}
map 的語法略有不同， 這是一個示例：
$colors: (color1:blue, color2:red, color3:green);
@each $key, $color in $colors {
.#{$color}-text {
color: $color;
}
}
請注意，需要用 $key 變數來參考 map 中的鍵， 否則，編譯后的 CSS 將包含 color1，color2...... 以上兩個代碼示例都轉換為以下 CSS：
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
@while 回圈
Sass 中的 @while 指令與 JavaScript 中的 while 類似， 只要滿足條件，它就會一直創建 CSS 代碼，
$x : 1;
@while $x < 13 {
.col-#{$x} {
width: 100%/12 * $x;
}
$x: $x + 1;
}
Partials
Sass 中的 Partials 是包含 CSS 代碼段的單獨的檔案， 這些片段可以匯入其它 Sass 檔案使用， 可以把類似代碼放到模塊中，以保持代碼結構規整且易于管理，
partials 的名稱以下劃線（_）字符開頭，這樣 Sass 就知道它是 CSS 的一小部分，而不會將其轉換為 CSS 檔案， 此外，Sass 檔案以 .scss 檔案擴展名結尾， 要將 partial 中的代碼放入另一個 Sass 檔案中，使用 @import 指令，
例如，如果所有 mixins 都保存在名為 “_mixins.scss” 的 partial 中，并且在 “main.scss” 檔案中需要它們，下面是使用方法：
@import 'mixins'
請注意，import 陳述句中不需要下劃線——Sass 知道它是 partial， 將 partial 匯入檔案后，可以使用所有變數、mixins 和其它代碼，
extend
Sass 有一個名為 extend 的功能，可以很容易地從一個元素中借用 CSS 規則并在另一個元素上重用它們，
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
現在需要另一個名為 .big-panel 的面板， 它具有與 .panel 相同的基本屬性，但還需要 width 和 font-size， 可以從 .panel 復制并粘貼初始 CSS 規則，但是當添加更多型別的面板時，代碼會變得重復， extend 指令是一種重用為一個元素撰寫的規則的簡單方法，可以為另一個元素重用并添加更多規則：
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}
除了新樣式之外，.big-panel 將具有與 .panel 相同的屬性，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509702.html
標籤：其他