Sass_基礎篇.pdf

Transcript

1. Sass 基礎篇 簡化你的 CSS
2. CSS 在 Code 很多時
 會變得很難讀 Sass 是⼀種 CSS
 的進化語法
 更容易閱讀
3. Nesting：降低⽗元素重複性 .parent { color: blue; .child { font-size: 12px; } } .parent { color: blue; } .parent .child { font-size: 12px; }
4. Codepen ⽀援 Sass 的語法表⽰
5. 屬性也可以使⽤ Nesting .parent { font : { family: Roboto, sans-serif; size: 12px; decoration: none; } } .parent { font-family: Roboto, sans- serif; font-size: 12px; font-decoration: none; }
6. 屬性模組化 @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; }
7. @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; }
8. @mixin 參數預設值 @mixin bordered($color: blue, $width: 1px) { border: $width solid $color; } .myTips { @include bordered($color: orange) }
9. @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; }