自從學會sass / compass後,考試都考100分!
DESCRIPTION
自從學會Sass / Compass後,考試都考100分!TRANSCRIPT
![Page 1: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/1.jpg)
⾃自從學會Sass / Compass後,考試都考100分!
講者:廖洧杰
![Page 2: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/2.jpg)
About Me
• 前端⼯工程師
• Desktop / Mobile 前端開發
• ⾼高雄前端發起⼈人 (2013/3)
• 撰寫Sass教學⼿手冊
• ⾼高雄、台北舉辦Sass課程(14hr)
![Page 3: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/3.jpg)
Sass 3.3
![Page 4: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/4.jpg)
⽗父選擇符:&
![Page 5: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/5.jpg)
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
![Page 6: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/6.jpg)
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
![Page 7: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/7.jpg)
@content可在@mixin裡撰寫程式碼
![Page 8: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/8.jpg)
@Mixin + @content
@Mixin example($bgcolor) { background: $bgcolor; @content;}!.selector{ @include example(pink){ color:blue; }}
.selector{ background:pink; color:blue;}
CSSSCSS
![Page 9: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/9.jpg)
@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
![Page 10: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/10.jpg)
@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
![Page 11: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/11.jpg)
@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
![Page 12: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/12.jpg)
&與@content總結• 利⽤用 & 會提取⽗父選擇符的觀念,節省程式碼負擔
• @content時常⽤用在狀態改變的情境上
• RWD
• Browser hack
• event(事件)
![Page 13: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/13.jpg)
@each + maps透過變數批次產⽣生樣式
![Page 14: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/14.jpg)
@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
![Page 15: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/15.jpg)
表單
@each
兩組表格表格
表格
@each
兩組表格表格
按鈕
@each
透過maps⾃自動新增各元素樣式
maps
兩組按鈕樣式
$colors:( white: #fff, blcak: #000)
![Page 16: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/16.jpg)
sass 3.3
source maps
![Page 17: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/17.jpg)
Sass 3.2 before
![Page 18: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/18.jpg)
source maps
![Page 19: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/19.jpg)
source maps 使⽤用流程• 建⽴立source map ( ruby or software )
!
!
• 開啟chrome 開發⼈人員⼯工具
scss --sourcemap sass/styles.scss public/styles.css
settings > General > Enable CSS source maps
![Page 20: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/20.jpg)
做到這裡,便可預覽,但不可編輯
![Page 21: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/21.jpg)
source maps 即時編輯更新• 開啟chrome 開發⼈人員⼯工具,添⼊入專案資料夾
!
!
• ⾄至chrome Sources找專案裡的sass/styles.scss按右鍵,點選 Map to Network Resource,並選擇對應的伺服器相同檔名的style.scss檔。
Settings > Workspace > Floders > Add folder
![Page 22: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/22.jpg)
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
![Page 23: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/23.jpg)
⾃自動產⽣生樣式表透過在CSS / SCSS / SASS上寫註解,
依規則編譯出網⾴頁樣式表
![Page 24: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/24.jpg)
線上程式碼服務⽀支援 SCSS / SASS
codepen JS Bin SassMeister
![Page 25: 自從學會Sass / Compass後,考試都考100分!](https://reader034.vdocuments.site/reader034/viewer/2022051323/54b755f94a795967588b47c7/html5/thumbnails/25.jpg)
Thanks