⾃自從學會Sass / Compass後，考試都考100分！

講者：廖洧杰

About Me

• 前端⼯工程師

• Desktop / Mobile 前端開發

• ⾼高雄前端發起⼈人 (2013/3)

• 撰寫Sass教學⼿手冊

• ⾼高雄、台北舉辦Sass課程(14hr)

Sass 3.3

⽗父選擇符：&

Sass 3.2

.box { font-weight: bold; &:hover { color: blue; } .no-js & { font-weight: normal; }}

SCSS.box { font-weight: bold;}.box:hover{ color: blue;}.no-js .box{ font-weight: normal}

CSS

Sass 3.3

.box { color: blue &-module {..} &__item {..} &None {..}}.box2 { .. &-menu { .. &-link{..} } }

SCSS.box {color:blue}.box-module{..}.box__item{..}.boxNone{..}!.box2{..}.box2-menu{..}.box2-menu-link{..}

CSS

@content可在@mixin裡撰寫程式碼

@Mixin + @content

@Mixin example($bgcolor) { background: $bgcolor; @content;}!.selector{ @include example(pink){ color:blue; }}

.selector{ background:pink; color:blue;}

CSSSCSS

@content + RWD(抽象命名)

@mixin RWD($width) { @media(max-width: $width){ @content; }}$mobile:320px;.box{ color:black; @include RWD($mobile){ color:blue; }}

SCSS.box{ color:black;}@media (max-width:320px){ .box{ color:blue; }}

CSS

@content + & (覆蓋樣式)

@mixin ie6{ * html &{ @content; }}!#logo{ background:url(a.png); @include ie6{ background: url(a.gif); }}

SCSS#logo{ background: url(a.png);}!* html #logo{ background: url(a.gif);}!

CSS

@content + & (連結狀態)

@mixin link{ &:link,&:visited{@content;}}@mixin link-hover{ &:hover, &:focus, &:active{@content;}}.box{ height:50px; @include link{color:#fff}; @include link-hover{color:#000};}

SCSS!.box{height:50px;}!.box:link,.box:visited{color:#fff;}!.box:hover,.box:focus,.box:active{color:#000;}

CSS

&與@content總結• 利⽤用 & 會提取⽗父選擇符的觀念，節省程式碼負擔

• @content時常⽤用在狀態改變的情境上

• RWD

• Browser hack

• event(事件)

@each + maps透過變數批次產⽣生樣式

@each+maps ⾃自動產⽣生class

$colors:( white: #fff, blcak: #000)@each $name,$color in $colors{ .btn-#{$name}{background: $color} }

SCSS!.btn-white{background:#fff;}.btn-blcak{background:#000;}!!!

CSS

表單

＠each

兩組表格表格

表格

＠each

兩組表格表格

按鈕

＠each

透過maps⾃自動新增各元素樣式

maps

兩組按鈕樣式

$colors:( white: #fff, blcak: #000)

sass 3.3

source maps

Sass 3.2 before

source maps

source maps 使⽤用流程• 建⽴立source map ( ruby or software )

!

!

• 開啟chrome 開發⼈人員⼯工具

scss --sourcemap sass/styles.scss public/styles.css

settings > General > Enable CSS source maps

做到這裡，便可預覽，但不可編輯

source maps 即時編輯更新• 開啟chrome 開發⼈人員⼯工具，添⼊入專案資料夾

!

!

• ⾄至chrome Sources找專案裡的sass/styles.scss按右鍵，點選 Map to Network Resource，並選擇對應的伺服器相同檔名的style.scss檔。

Settings > Workspace > Floders > Add folder

source maps延伸閱讀• Getting started with CSS sourcemaps and in-

browser Sass editing http://goo.gl/w1zbVg\

• Sass 3.3 Source Maps http://goo.gl/rf3xLH

⾃自動產⽣生樣式表透過在CSS / SCSS / SASS上寫註解，

依規則編譯出網⾴頁樣式表

線上程式碼服務⽀支援 SCSS / SASS

codepen JS Bin SassMeister

Thanks

⾏行動科技應⽤用開發者年會http://mopcon.org/