Submit Search
Upload
自從學會Sass / Compass後,考試都考100分!
•
35 likes
•
4,675 views
洧杰 廖
Follow
自從學會Sass / Compass後,考試都考100分!
Read less
Read more
Education
Report
Share
Report
Share
1 of 26
Download now
Download to read offline
Recommended
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
Vertical rhythm
Vertical rhythm
洧杰 廖
現代化網頁基礎排版技術
現代化網頁基礎排版技術
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架
Vincent Chi
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Zhu Qi
Recommended
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
Vertical rhythm
Vertical rhythm
洧杰 廖
現代化網頁基礎排版技術
現代化網頁基礎排版技術
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架
Vincent Chi
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Zhu Qi
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
wantingj
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
重构经验分享
重构经验分享
TenJessy
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
编辑器设计2
编辑器设计2
yiming he
SASS入門實作
SASS入門實作
Kingsley Zheng
Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
Yvonne Yu
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?
shiang huang
老成的Sass&Compass
老成的Sass&Compass
智遠 成
從CSS到SASS的開發旅程
從CSS到SASS的開發旅程
Anna Su
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
蘇姵欣 PeiSu
付振华 前端开发环境优化
付振华 前端开发环境优化
czbad
Style基础优化之独角兽篇
Style基础优化之独角兽篇
fangdeng
網頁設計 - 概述
網頁設計 - 概述
Vincent Chi
Flexbox版面配置
Flexbox版面配置
景智 張
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
一拳前端考題
一拳前端考題
洧杰 廖
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
More Related Content
What's hot
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
wantingj
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
重构经验分享
重构经验分享
TenJessy
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
编辑器设计2
编辑器设计2
yiming he
SASS入門實作
SASS入門實作
Kingsley Zheng
Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
Yvonne Yu
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?
shiang huang
老成的Sass&Compass
老成的Sass&Compass
智遠 成
從CSS到SASS的開發旅程
從CSS到SASS的開發旅程
Anna Su
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
蘇姵欣 PeiSu
付振华 前端开发环境优化
付振华 前端开发环境优化
czbad
Style基础优化之独角兽篇
Style基础优化之独角兽篇
fangdeng
網頁設計 - 概述
網頁設計 - 概述
Vincent Chi
Flexbox版面配置
Flexbox版面配置
景智 張
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
What's hot
(20)
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
重构经验分享
重构经验分享
網頁開發工具 20140630
網頁開發工具 20140630
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
编辑器设计2
编辑器设计2
SASS入門實作
SASS入門實作
Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
Chrome 佛心做了 Devtool 就是要用啊? 從 Timeline 學調效動畫效能
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?
老成的Sass&Compass
老成的Sass&Compass
從CSS到SASS的開發旅程
從CSS到SASS的開發旅程
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
付振华 前端开发环境优化
付振华 前端开发环境优化
Style基础优化之独角兽篇
Style基础优化之独角兽篇
網頁設計 - 概述
網頁設計 - 概述
Flexbox版面配置
Flexbox版面配置
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Viewers also liked
一拳前端考題
一拳前端考題
洧杰 廖
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃
洧杰 廖
前端開發流程分享
前端開發流程分享
洧杰 廖
CP 值很高的 Gulp
CP 值很高的 Gulp
Yvonne Yu
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
洧杰 廖
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Tim (文昌)
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering path
Yvonne Yu
Sass-Front-End Developers Taiwan Party - 5
Sass-Front-End Developers Taiwan Party - 5
洧杰 廖
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
twMVC
Pinkoi 把手機版網站變好用了
Pinkoi 把手機版網站變好用了
Adam Wang
Peripheral Programming using Arduino and Python on MediaTek LinkIt Smart 7688...
Peripheral Programming using Arduino and Python on MediaTek LinkIt Smart 7688...
MediaTek Labs
C#
C#
Shi-Xun Hong
LinkIt Smart 7688 Duo and MCS basics
LinkIt Smart 7688 Duo and MCS basics
CAVEDU Education
How to create your Smart Toy with bluemix & 7688 Duo board
How to create your Smart Toy with bluemix & 7688 Duo board
湯米吳 Tommy Wu
智慧行動App跨國推廣經驗談 by 天橋科技
智慧行動App跨國推廣經驗談 by 天橋科技
Amos Lee
LinkIt Smart 7688程式開發
LinkIt Smart 7688程式開發
Wei-Tsung Su
運用 Ibm watson技術快速打造智慧應用系統
運用 Ibm watson技術快速打造智慧應用系統
湯米吳 Tommy Wu
MQTT簡介與使用開放原始碼
MQTT簡介與使用開放原始碼
Wei-Tsung Su
RWD常見設計模式
RWD常見設計模式
Nowill Chang
Viewers also liked
(20)
一拳前端考題
一拳前端考題
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
Sass&rwd前端版型架構規劃
Sass&rwd前端版型架構規劃
前端開發流程分享
前端開發流程分享
CP 值很高的 Gulp
CP 值很高的 Gulp
那些年,我們曾經做過的wireframe、mockup、prototype
那些年,我們曾經做過的wireframe、mockup、prototype
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Show Me The Page - 介紹 Critical rendering path
Show Me The Page - 介紹 Critical rendering path
Sass-Front-End Developers Taiwan Party - 5
Sass-Front-End Developers Taiwan Party - 5
RWD不是你想的那樣 tw mvc#13
RWD不是你想的那樣 tw mvc#13
Pinkoi 把手機版網站變好用了
Pinkoi 把手機版網站變好用了
Peripheral Programming using Arduino and Python on MediaTek LinkIt Smart 7688...
Peripheral Programming using Arduino and Python on MediaTek LinkIt Smart 7688...
C#
C#
LinkIt Smart 7688 Duo and MCS basics
LinkIt Smart 7688 Duo and MCS basics
How to create your Smart Toy with bluemix & 7688 Duo board
How to create your Smart Toy with bluemix & 7688 Duo board
智慧行動App跨國推廣經驗談 by 天橋科技
智慧行動App跨國推廣經驗談 by 天橋科技
LinkIt Smart 7688程式開發
LinkIt Smart 7688程式開發
運用 Ibm watson技術快速打造智慧應用系統
運用 Ibm watson技術快速打造智慧應用系統
MQTT簡介與使用開放原始碼
MQTT簡介與使用開放原始碼
RWD常見設計模式
RWD常見設計模式
Similar to 自從學會Sass / Compass後,考試都考100分!
3sss book
3sss book
Hina Chen
Sass compass
Sass compass
fangdeng
Sass与compass学习笔记
Sass与compass学习笔记
Jace Lee
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Duran Hsieh
Min book
Min book
Hina Chen
10 css設計
10 css設計
欣彥 郭
CSS 語法教學
CSS 語法教學
Shengyou Fan
Css
Css
fzuhua
Css布局
Css布局
pi cheng
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
Similar to 自從學會Sass / Compass後,考試都考100分!
(10)
3sss book
3sss book
Sass compass
Sass compass
Sass与compass学习笔记
Sass与compass学习笔记
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Min book
Min book
10 css設計
10 css設計
CSS 語法教學
CSS 語法教學
Css
Css
Css布局
Css布局
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
Recently uploaded
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
jhujyunjhang
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
PUAXINYEEMoe
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
businesshealthwise
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
PUAXINYEEMoe
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
微信 tytyqqww业务接单
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
611002610
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
微信 tytyqqww业务接单
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
michaelell902
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
jhujyunjhang
Recently uploaded
(9)
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
自從學會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/
Download now