10x Developer
  • Introduction
  • HTML
    • HTML DOM Jquery
    • HTML: Form
    • CSS
    • CSS Layout
    • CSS Flexbox
    • CSS Grid
    • SASS/LESS
    • CSS/LESS/SASS Cookbook
    • Bootstrap
  • JavaScript
    • JavaScript
    • ES6
    • TypeScript
    • JavaScript Testing
    • JavaScript Event Loop
    • DOM
    • Web APIs
    • JSON
    • RegEx
    • Functional Programming
    • JavaScript Lib
    • CoffeeScript
    • CoffeeScript to ES6 cheatsheet
  • Angular.js
    • Angular
    • Angular Cookbook
    • Angular Mistakes I Made
    • Angular 1.x
  • React.js
    • React.js
  • Node
    • Node.js
    • CLI command line tool
    • Electron / Atom
    • NW.js (node-webkit)
  • Serverless
    • AWS Lambda
    • Google Cloud Function
    • Actions on Google / Google Assistant
  • Full Stack Development
    • HTTP
    • Meteor
    • MongoDB
    • Digital Ocean
    • UI
    • Sketch
    • Web Dev Resources
  • Lang
    • Ruby
  • Know Your Tools
    • Chrome DevTools
    • Editor: VS Code
    • Editor: Vim
    • Editor: Sublime
    • Editor: Atom
    • Windows
    • Git
    • Linux / Bash
    • Mac
  • Cheatsheets
Powered by GitBook
On this page
  1. HTML

SASS/LESS

PreviousCSS GridNextCSS/LESS/SASS Cookbook

Last updated 6 years ago

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

Mixin, Extend, Placeholders

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) { }

```

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