WHAT IS SASS ?

CSS

CASCADING STYLESHEETS

SASS

SYNTACTICALLY AWESOME STYLESHEETS

SCSS

SASSY CSS

preprocessor
&
postprocessor

why SASS ?

HOW SASS ?

• Live Server

• Live Sass Compile

• Settings

NeSTed

NESTed SELECTOR

NESTed PROPS

Parent SELECTOR

COMMENT

VARIABLE & OPERATION

LIST & MAP

EXTEND、MIXIN、FUNCTION

IMPORT

SASS FUNCTIONS

閱讀性、重用性、維護性、擴充性

分離結構與主題、分離容器與內容

結構分類、命名規則、HTML/CSS分離

區塊、元素、狀態

MEDIA QUERY

GRID SYSTEM

GULP & SASS

WEBPACK & SASS

POSTCSS & CSS-NEXT