Sass 基礎篇 簡化你的 CSS 

CSS 在 Code 很多時
 會變得很難讀 Sass 是⼀種 CSS
 的進化語法
 更容易閱讀 

Nesting：降低⽗元素重複性 .parent { color: blue; .child { font-size: 12px; } } .parent { color: blue; } .parent .child { font-size: 12px; } 

Codepen ⽀援 Sass 的語法表⽰ 

屬性也可以使⽤ Nesting .parent { font : { family: Roboto, sans-serif; size: 12px; decoration: none; } } .parent { font-family: Roboto, sans- serif; font-size: 12px; font-decoration: none; } 

屬性模組化 @mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; } .danger { @include: important-text; background-color: green; } .danger { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; background-color: green; } 

@mixin 傳入參數 @mixin bordered($color, $width) { border: $width solid $color; } .myArticle { @include bordered(blue, 1px); } .myNotes { @include bordered(red, 2px); } .myArticle { border: 1px solid blue; } .myNotes { border: 2px solid red; } 

@mixin 參數預設值 @mixin bordered($color: blue, $width: 1px) { border: $width solid $color; } .myTips { @include bordered($color: orange) } 

@extend 屬性繼承 .button-basic { border: none; padding: 15px 30px; text-align: center; } .button-report { @extend .button-basic; background-color: red; } .button-submit { @extend .button-basic; background-color: green; } .button-basic .button- report .button-submit { border: none; padding: 15px 30px; text-align: center; } .button-report { background-color: red; } .button-submit { background-color: green; }