0403notes

[shiaoyi]

0403

CSS 預處理器（preprocessor）

用程式化的方法寫 CSS，最後 compile 成真的 CSS
例如：Scss/Sass、Less、Stylus

安裝Sass

sudo npm install -g sass

Nesting 巢狀結構

要寫class裡的class時，不用一直堆加前面的class，巢狀可以顯示他的層級

輸入sass檔，輸出css檔

code input.sass output.css //使用vscode

• 範例

.card {
  width: 100px;
  .box {
    width: 30px;
  }
}
// compile to
.card { width: 100px; }
.card .box {
  width: 30px;
}

Parent

利用&可接續父字串，更適合用於BEM寫法

• 範例

.card {
  width: 100px;
  &__box {
    width: 30px;
  }
}
// compile to
.card { width: 100px; }
.card__box {
  width: 30px;
}

Mixin（就像 js 的 function）

• 範例

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { 
  @include border-radius(10px); 
}

PostCSS

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
PostCSS是一套很方便的工具，可以自己寫plugin整合進去，或是挑選你要的plugin，然後把原來的css處理過後，讓它變成你想要的樣子。

• 範例

.my-class, #my-id {
    border-radius: 1em;
    transition: all 1s ease;
    box-shadow: #123456 0 0 10px;
}
// change to
.my-class, #my-id {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -moz-box-shadow: #123456 0 0 10px;
    -webkit-box-shadow: #123456 0 0 10px;
    box-shadow: #123456 0 0 10px
}