SCSS DEMO

//Variables 變數,使用$作為開頭當參數

scss:
$linkcolor:#ff0000;
$linksize:15px;


.font_link{
color: $linkcolor;
font-size: $linksize;
}


css:
.font_link {
color:red;
font-size:15px;
}



//Nesting 巢狀結構

scss:
ul{
margin: 0px;
li{
padding: 0px;
.face{
width: 100%;
}
&.eye{
width: 100%;
}
}
}

css:
ul {
margin:0;
}

ul li {
padding:0;
}

ul li .face {
width:100%;
}

ul li.eye {
width:100%;
}


//（@include）Mixins ,其實就像function一樣使用，還可以帶參數

scss:
@mixin boxA{
width: 100%;
padding: 0px;
}

#boxAA{
@include boxA;
}



@mixin boxB($paddinga: 100%){
padding: $paddinga;
}

#boxBB{
@include boxB(50%);
}

css:
#boxAA {
width:100%;
padding:0;
}

#boxBB {
padding:50%;
}


//（@extend）繼承

scss:
.red_color{
color: red;
font-size: 12px;
}

.red_box{
@extend .red_color;
}

css:
.red_color,.red_box {
color:red;
font-size:12px;
}