Post on 15-Jan-2015
description
⾃自從學會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