SCSS是個能用更有效率的方法來編寫CSS的程式語言
語法跟CSS大同小異，但是比CSS來得好寫且更容易閱讀
巢狀(Nesting)
愛上SCSS的主要功能之一，這個功能可以大幅減少編寫重複的開頭
透過巢狀式的結構也可以清楚的知道元素上下層的關聯性。
.box{
width: 100%;
margin: 0 auto;
.title{
padding: 10px;
p{
color: rgba(255, 0, 0, 1);;
}
}
}
編譯成CSS就會變成
.box{
width: 100%;
margin: 0 auto;
}
.box .title{
padding: 10px;
}
.box .title p{
color: rgba(255, 0, 0, 1);;
}
這個功能也可以使用在相同的屬性上面
p{
font:{
family: arial, sans-serif;
size: 10px;
decoration: none;
}
}
編譯後
=====>
p{
font-family: arial, sans-serif;
font-size: 10px;
font-decoration: none;
}
還有一個方便的功能是使用 & 符號來代替父層
.box{
color: rgba(0, 0, 0, 1);
&:hover{
color: red;
}
}
編譯後
=====>
.box{
color: rgba(0, 0, 0, 1);
}
.box:hover{
color: rgba(255, 0, 0, 1);
}
變數(Variables)
$ 來表示變數
變數可以用來儲存值，方便重複利用
$box-shadow: 10px 10px 5px rgba(0, 0, 0, 1);
.box{
box-shadow: $box-shadow;
}
編譯後
=====>
.box{
box-shadow: 10px 10px 5px rgba(0, 0, 0, 1);
}
變數也能拿來做運算
$num:5px;
.container{
margin:$num*2 $num;
}
編譯後
=====>
.container{
margin: 10px 5px;
}
混入(Mixins)
函式可以使用在重複多行的樣式上面，像是CSS的一些新屬性就可能需要加上瀏覽器前綴，這個部分就可以透過函式來完成
要特別注意的是@mixin需要配合@include來使用
@mixin來設定要使用的樣式、@include則是套用樣式
@mixin css3-border-radius() {
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.box {
@include css3-border-radius();
}
編譯後
=====>
.box {
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
函式也可以搭配參數使用讓使用上更加靈活。
@mixin css3-border-radius($i) {
-ms-border-radius: $i;
-moz-border-radius: $i;
-webkit-border-radius: $i;
-o-border-radius: $i;
border-radius: $i;
}
.box {
@include css3-border-radius(3px);
}
編譯後
=====>
.box {
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
引入、匯入(Import)
在檔案中加入其他SCSS或CSS檔案，最後編譯時會一併編譯。
假如我想在某個SCSS檔案裡面匯入head、main、footer等scss的檔案就可以使用下面這段程式碼
@import "head.scss";
@import "main.scss";
@import "footer.scss"
繼承(Extend)
@extend主要是用在合併相同程式碼，假如有很多段相同的程式碼
就可以使用@extend進行合併
只要加上站位符號 % 就能讓被繼承的CSS類消失
%box {
border: 1px solid rgba(0, 0, 0, 1);
padding: 10px;
color: rgba(0, 0, 0, 1);
}
.success {
@extend %box;
border-color: rbga(0, 128, 0, 1);
}
.danger {
@extend %box;
border-color: rgba(255, 0, 0, 1);
}
編譯後
=====>
.success, .danger{
border: 1px solid black;
padding: 10px;
color: black;
}
.success{
border-color: rgba(0, 128, 0, 1);
}
.danger{
border-color: rgba(255, 0, 0, 1);
}
函式(Functions)
SCSS中也有@function可以使用，像是@if、@for
不過我還不太熟這些…
有興趣的朋友可以查看內建函式的清單
註解(Comment)
只要在程式碼開頭加上兩條斜線//就可以加入註解。
//我是註解
