Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass.pdf

 Sass.pdf

darrenyaoyaoyao

November 13, 2020
Tweet

More Decks by darrenyaoyaoyao

Other Decks in Programming

Transcript

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

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

    size: 12px; decoration: none; } } .parent { font-family: Roboto, sans- serif; font-size: 12px; font-decoration: none; }
  3. 屬性模組化 @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; }
  4. @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; }
  5. @mixin 參數預設值 @mixin bordered($color: blue, $width: 1px) { border: $width

    solid $color; } .myTips { @include bordered($color: orange) }
  6. @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; }