SASS / LESS

  • SASS Style Guide
  • 使用Compass不但讓SCSS的使用更方便,還有大量的module、helper可以使用,解決cross broswer的問題並且減少重複的程式碼,增加可讀性。

Mixin, Extend, Placeholders

http://krasimirtsonev.com/blog/article/SASS-mixins-extends-and-placeholders-differences-use-cases

Mixin vs Extend

  • Mixin: composition (different kind of things composite together), similar to "has-a" in OO.
    • ex: a .dance-on-hover-btn and a .dance-on-hover-link could both mixin the same .dance-on-hover behavior
  • Extend is about inheritance (same kind of things in the inheritance chain), similar to "is-a" in OO.

    • ex: a .round-secondary-btn extends from a .-secondary-btn

    Real world example: ```css .table-header { text-transform: uppercase; color: gray; }

// order-history-header is a kind of table-header, thus using 'extend' .order-history:extend(.table-header) { } ```

results matching ""

    No results matching ""