SCSS 變數(Variables)：
在SCSS中，當要使用變數時，只要使用$當起頭，後方再放入所要設定的參數值就可以了，這對於設定網站的標準色相當的方便，如此一來就不用每次往返的查詢當初所設定的顏色是什麼。
var.scss
$color1 : #FD1B3F;
$color2 : #F7E02A;
$color3 : #6AC217;
$color4 : #403ED3;
$color5 : #ffffff;
$color6 : #000000;
a{
background: $color6;
color:$color5;
} |
var.css
a { background: #0000; color: #ffffff; } |
在變數的地方，除了是文字外，也支援數學的運算。
var-1.scss
$num:5px;
.container{
margin:$num*2 $num;
} |
var-1.css
.container{ margin:10px 5px; } |
SCSS 巢狀(Nesting)：
巢狀結構算是最常被使用的，透過巢狀式的結構，可清楚的知道元素上下層的關聯性，同時也可減少重覆的編寫開頭。
nessing.scss
.container {
width: 1170px;
margin:0 auto;
.post {
border: solid 1px #ccc;
padding: 10px;
.post-info{
background:#eee;
font-size: 12px;
padding: 10px;
p {
color:#333;
}
}
}
} |
nessing.css
.container { width: 1170px; margin: 0 auto; } .container .post { border: solid 1px #ccc; padding: 10px; } .container .post .post-info { background: #eee; font-size: 12px; padding: 10px; } .container .post .post-info p { color: #333; } |
SCSS 函式(Mixins)：
函式的部分，可將一些重覆性的屬性給行寫好，像是CSS3的動畫，或是一些CSS3的新屬性，前方需加前綴詞的部分，就可透過函式來完成，同時函式本身還具備參數的機制，因此也可入參數，使用上就更加靈活。
mixins.scss
@mixin css3-transition() {
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
.post {
@include css3-transition();
} |
mixins.css
.post { transition: width 2s; -moz-transition: width 2s; -webkit-transition: width 2s; -o-transition: width 2s; } |
而也可透過參數的方式，來設定函式裡面的設定值。
mixins-1.scss
@mixin css3-transition($i) {
transition: width $i;
-moz-transition: width $i;
-webkit-transition: width $i;
-o-transition: width $i;
}
.post {
@include css3-transition(5s);
} |
mixins-1.css
.post { transition: width 5s; -moz-transition: width 5s; -webkit-transition: width 5s; -o-transition: width 5s; } |
SCSS 繼承(Extend)：
繼承聽起來很複雜，其實簡單的來說，就是CSS中的群組，可將共用到的放在一起，而寫法也相當的簡單。
extend.scss
body {
margin:0
padding: 0;
color: #333;
}
h1 {
@extend body;
font-size:30px;
}
h2 {
@extend body;
font-size:24px;
}
p {
@extend body;
font-size:15px;
} |
extend.css
body, h1, h2, p { margin:0; padding: 0; color: #333; } h1 { font-size:30px; } h2 { font-size:24px; } p { font-size:15px; } |
以上這五個是最常被使用到，當然SCSS也具備一些像for迴圈與if判斷式，這邊梅干就不多作介紹，而工具是要提升工作效能，因此對於for迴圈與if判斷有興趣的朋友，可再自行研究，而這五大類，就足以解決版型樣式設定上的大大小小需求，同時在SCSS中，若這五大類都不需使用時，也可直接寫CSS也是可以的，同時不會出現任何的錯誤，這有別於SASS，因此梅干才說SCSS相當適合網頁設計師來使用，因此還在觀望的朋友，不妨有空也可使用看看喔!