Sass(Syntactically Awesome Stylesheets),一種基於 CSS 的前置語言,在 css3 推出之後有著更接近 CSS 寫法的 SCSS。
scss 可以使用變數,使用 $ 開頭
變數可以再進行作加減乘除餘運算,甚至字串與顏色色碼也可以進行運算
$color: red;
p {
background-color: $color;
}
span {
background-color: $color;
}
可以簡化寫法並且減少重複性
.parent {
color: red;
.child {
font-size: 12px;
}
}
在 css 的話會是長這樣
.parent {
color: red;
}
.parent .child {
font-size: 12px;
}
另一種做法可以使用 & 來代替父元素
.parent{
&:hover{}
&.child-class{}
}
編譯完的 CSS 為
.parent:hover{}
.parent.child-class{}
類似函式或是一群值的組合,可以在其他區塊使用 @include 來匯入使用 @mixin 定義過的。經常用於需要相符不同瀏覽器品牌的 CSS3 宣告上。
舉例來說:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.block {
@include border-radius(10px);
}
@mixin 也可以使用預設值
@mixin border-radius($radius: 10px) {
...
}
如同一般程式語言的函數使用
@function calc-width ($col) {
@return 100% / $col;
}
.col-two {
width: calc-width(2); // spans 2 columns, width = 50%
}
.col-three {
width: calc-width(3); // spans 3 columns, width = 33.3%
}