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

1. ⾃自從學會Sass / Compass後，
考試都考100分！
講者：廖洧杰

2. About Me
• 前端⼯工程師
• Desktop / Mobile 前端開發
• ⾼高雄前端發起⼈人 (2013/3)
• 撰寫Sass教學⼿手冊
• ⾼高雄、台北舉辦Sass課程(14hr)

3. Sass 3.3

4. ⽗父選擇符：&

5. 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

6. 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

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

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

9. @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

10. @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

11. @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

12. &與@content總結
• 利⽤用 & 會提取⽗父選擇符的觀念，節省程式碼負擔
• @content時常⽤用在狀態改變的情境上
• RWD
• Browser hack
• event(事件)

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

14. @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

15. 表單
＠each
兩組表格表格
表格
＠each
兩組表格表格
按鈕
＠each
透過maps⾃自動
新增各元素樣式
maps
兩組按鈕樣式
$colors:(
white: #fff,
blcak: #000
)

16. sass 3.3
source maps

17. Sass 3.2 before

18. source maps

19. source maps 使⽤用流程
• 建⽴立source map ( ruby or software )
!
!
• 開啟chrome 開發⼈人員⼯工具
scss --sourcemap sass/styles.scss public/styles.css
settings > General > Enable CSS source maps

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

21. source maps 即時編輯更新
• 開啟chrome 開發⼈人員⼯工具，添⼊入專案資料夾
!
!
• ⾄至chrome Sources找專案裡的sass/styles.scss按
右鍵，點選 Map to Network Resource，並選擇
對應的伺服器相同檔名的style.scss檔。
Settings > Workspace > Floders > Add folder

22. 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

23. ⾃自動產⽣生樣式表
透過在CSS / SCSS / SASS上寫註解，
依規則編譯出網⾴頁樣式表

24. 線上程式碼服務
⽀支援 SCSS / SASS
codepen JS Bin SassMeister

25. Thanks

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