Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sass带来的变革
Search
w3cplus
November 08, 2014
Technology
2
480
Sass带来的变革
介绍Sass的特性以及学习路线,并用案例介绍Sass & OOCSS结合在一些编写代码的强大魅力。
w3cplus
November 08, 2014
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
170
CSS Future
w3cplus
2
550
Web Animation
w3cplus
5
430
CSS3带来的变化
w3cplus
0
1.3k
Web重构之道
w3cplus
1
2.6k
Responsive小试牛刀
w3cplus
3
500
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
340
http协议与缓存简述
w3cplus
5
490
前端自动化工具探索
w3cplus
4
910
Other Decks in Technology
See All in Technology
NgRx Signal Store
rainerhahnekamp
0
150
反実仮想機械学習とは何か
usaito
PRO
11
3.8k
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
340
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
440
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
290
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
280
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.4k
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
200
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
120
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
Featured
See All Featured
For a Future-Friendly Web
brad_frost
172
9k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Product Roadmaps are Hard
iamctodd
44
9.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Design by the Numbers
sachag
274
18k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
The Pragmatic Product Professional
lauravandoore
25
5.8k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Typedesign – Prime Four
hannesfritz
36
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
120
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Transcript
Sass带来的变⾰革 By @⼤大漠
None
Sass是什么? ⼯工具 语⾔言 处理器 CSS预处理器语⾔言
为什么选择Sass? 功能强 资料多 案例多
Sass功能与特性 定义变量 逻辑判断 函数 混合宏与占位符 Maps …
Sass学习路线 初级 ⾼高级 中级 环境 安装 语法 编译 特性 组织
实战 调试 定义功能 封装插件 编写框架
Sass环境 自带Ruby 需要安装Ruby 参考资料: https:/ /www.ruby-lang.org/en/installation/ http:/ /www.w3cplus.com/sassguide/install.html http:/ /www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html
Sass安装 $ gem install sass $ sudo gem install sass
$ sass -v Sass 3.4.7 (Selective Steve) http:/ /rubygems.org/gems/sass
Sass语法 $width: 300px; .container { width: $width; } $width: 300px
.container width: $width Sass SCSS
Sass编译 $ sass style.scss:style.css $ sass sass/:css/ 命令 编译 $
sass —watch style.scss/:css/style.css GUI 编译 自动 化编 参考资料: http:/ /www.w3cplus.com/preprocessor/sass-compile.html http:/ /www.w3cplus.com/preprocessor/sass-gui-tool-koala.html http:/ /www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html http:/ /www.w3cplus.com/preprocessor/nodejs-and-grunt-compile-sass-to-css.html
Sass调试 参考资料: http:/ /www.w3cplus.com/preprocessor/sass-debug-with-developer-tool.html http:/ /www.w3cplus.com/preprocessor/sass-3.3-source-maps.html http:/ /www.w3cplus.com/tools/source-maps-101.html SourceMap
Sass基本特性 变量$ 混合宏@mixin 占位符%placeholder 运算符 函数 嵌套 列表list 选择符& map
控制命令 参考资料: http:/ /www.w3cplus.com/preprocessor/sass-basic-syntax-and-features.html http:/ /www.w3cplus.com/preprocessor/two-handy-and-advanced-sass-features-and-their-limitations.html http:/ /www.w3cplus.com/preprocessor/future-sass.html @at-root 继承
Sass特性之变量 CSS中能有变量?据说在未来.... Sass中是有变量的,Sass中如何定义变量? Sass中的变量离不开美⼑刀 $ $width: 300px; 变量声明符 变量名称 变量值
参考资料: http:/ /www.w3cplus.com/preprocessor/sass-basic-variable.html http:/ /www.w3cplus.com/preprocessor/stop-using-so-many-sass-variables.html http:/ /www.w3cplus.com/preprocessor/beginner/variable-naming.html http:/ /www.w3cplus.com/preprocessor/sass-selector-variables.html
Sass特性之混合宏 @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include
prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } } 声明混合宏符号 混合宏名称 混合宏参数 混合宏代码块 .box { @include box-shadow; } .box { @include box-shadow(inset 1px 1px 2px rgba(black,.3)); } 使用@include 引用混合宏 调用默认混合宏 调用带参数的混合宏
Sass特性之继承 .mt5{ margin-top:5px; } .block{ @extend .mt5; } .mt5, .block
{ margin-top: 5px; } Sass Sass CSS @extend来继 承类名
Sass特性之占位符 %mt5{ margin-top:5px; } .block{ @extend %mt5; } .block {
margin-top: 5px; } Sass Sass CSS @extend来扩展 使用%声明占位符
混合宏 vs 继承 vs占位符 @mixin mt($var){ margin-top: $var; } .block{
@include mt(5px); } .block { margin-top: 5px; } Sass Sass CSS 混合宏@mixin .mt5{ margin-top:5px; } .block{ @extend .mt5; } .mt5, .block { margin-top: 5px; } Sass Sass CSS 继承class %mt5{ margin-top:5px; } .block{ @extend %mt5; } .block { margin-top: 5px; } Sass Sass CSS 占位符%placeholder
混合宏 vs 继承 vs占位符 那么问题来了? 哪家技术强?
混合宏 vs 继承 vs占位符 参考资料: http:/ /www.w3cplus.com/preprocessor/sass-basic-mixins-nesting-placeholders-extend.html http:/ /www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html http:/
/www.w3cplus.com/preprocessor/ten-best-common-mixins.html http:/ /www.w3cplus.com/preprocessor/understanding-placeholder-selectors.html http:/ /www.w3cplus.com/preprocessor/sass-mixin-placeholder.html http:/ /www.w3cplus.com/preprocessor/creating-repeatable-style-pattern-sass-placeholders-vs-mixins.html http:/ /www.w3cplus.com/preprocessor/css-shapes-reference-boxes.html
单类 vs 多类
单类 vs 多类 /*padding and margin all*/ .paxs{padding:5px;} .pas {padding:
10px;} .pam{padding:15px;} .pal{padding:20px;} .paxl{padding: 25px;} .paxxl{padding: 30px;} .maxs{margin:5px;} .mas {margin: 10px;} .mam{margin:15px;} .mal{margin:20px;} .maxl{margin: 25px;} .maxxl{margin: 30px;} <div class="header maxs paxs"></div> /*padding and margin all*/ %paxs{padding:5px;} %pas {padding: 10px;} %pam{padding:15px;} %pal{padding:20px;} %paxl{padding: 25px;} %paxxl{padding: 30px;} %maxs{margin:5px;} %mas {margin: 10px;} %mam{margin:15px;} %mal{margin:20px;} %maxl{margin: 25px;} %maxxl{margin: 30px;} <div class="header"></div> .header { @extend %paxs; @extend %maxs; } .header { padding:5px; margin:5px; } 多类 单类 CSS HTML Sass Sass CSS HTML
Sass特性之嵌套 .header { padding:5px; margin:5px; nav { background-color: red; }
&:after{ content:""; display: table; clear: both; } .home & { background-color: green; } } .header { padding: 5px; margin: 5px; } .header nav { background-color: red; } .header:after { content: ""; display: table; clear: both; } .home .header { background-color: green; } Sass CSS 参考资料: http:/ /www.w3cplus.com/preprocessor/beginner/the-inception-rule.html http:/ /www.w3cplus.com/preprocessor/CSS-preprocessors-and-parent-selectors.html
Sass特性之运算 $wide: 200px; $space: $wide / 10; .content { width:
$wide * 5; padding: $space; } .block { width: $wide - $space; } .content { width: 1000px; padding: 20px; } .block { width: 180px; } Sass CSS
Sass特性之函数 字符串函数 数字函数 列表函数 三元函数 颜⾊色函数 自定义函数 $link-color: green; .a
{ color: $link-color; background-color: lighten($link-color,5%); &:hover { color: darken($link-color,5%); } } .a { color: green; background-color: #009a00; } .a:hover { color: #006700; } @function pxTorem($px,$browser-default-font-size){ @return $px / $browser-default-font-size * 1rem; } h2 { font-size: pxTorem(32px,16px); } h2 { font-size: 2rem; } 参考资料: http:/ /www.w3cplus.com/preprocessor/sass-other-function.html http:/ /www.w3cplus.com/preprocessor/sass-color-function.html Sass CSS Sass CSS
Sass特性之选择符 &的魅⼒力 a { color: orange; &:hover { color: darken(orange,5%);
} .header & { color: lighten(orange,5%); } } .block { color: blue; &__element{ color: yellow; } &--modify { color: green; } } Sass a { color: orange; } a:hover { color: #e69500; } .header a { color: #ffae1a; } .block { color: blue; } .block__element { color: yellow; } .block--modify { color: green; } CSS 参考资料: http:/ /www.w3cplus.com/preprocessor/use-ampersand-in-selector-name-with-Sass.html http:/ /www.w3cplus.com/preprocessor/sass-future-use-ampersand.html
Sass特性之@at-root .block { color: green; ul { list-style:none outside none;
li { margin:0; @at-root a { color:green; } } } } .block { color: green; } .block ul { list-style: none outside none; } .block ul li { margin: 0; } a { color: green; } Sass CSS
Sass特性之控制命令 @if @for @while @each 参考资料: http:/ /www.w3cplus.com/preprocessor/Sass-control-directives-if-for-each-while.html http:/ /www.w3cplus.com/preprocessor/sass-advanced-application.html
http:/ /www.w3cplus.com/preprocessor/getting-into-sass-control-directives.html
控制命令之@if @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is
#{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); } .block { display: block; } .hidden { display: none; } Sass CSS
控制命令之@for $color: green !default; @for $i from 1 through 4
{ .#{$color}-#{$i}{ color: darken($color,5% * $i); } } .green-1 { color: #006700; } .green-2 { color: #004d00; } .green-3 { color: #003400; } .green-4 { color: #001a00; } Sass CSS @for $var from <start> through <end> .green-1 { color: #006700; } .green-2 { color: #004d00; } .green-3 { color: #003400; } @for $var from <start> to <end> CSS $color: green !default; @for $i from 1 to 4 { .#{$color}-#{$i}{ color: darken($color,5% * $i); } } Sass
控制命令之@each $list: adam john wynn mason kuroi; @mixin author-images {
@each $author in $list { .photo-#{$author} { background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; } .author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; } .author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; } .author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; } .author-bio .photo-mason { background: url("/images/avatars/mason.png") no-repeat; } .author-bio .photo-kuroir { background: url("/images/avatars/kuroir.png") no-repeat; } Sass CSS @each $var in <list>
控制命令之@while $types: 4; $type-width: 20px; @while $types > 0 {
.while-#{$types} { width: $type-width + $types; } $types: $types - 1; } .while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; } Sass CSS
Sass特性之列表 $list:(); $list:(#b4d455,42,"awesome"); $list-space: "item-1" "item-2" "item-3"; $list: ( ("item-1.1",
"item-1.2", "item-1.3"), ("item-2.1", "item-2.2", "item-2.3"), ("item-3.1", "item-3.2", "item-3.3") ); 定义列表⽅方式 .header { color: green; } .footer { color: yellow; } @function first($list){ @return nth($list,1); } @function last($list){ @return nth($list,length($list)); } $colors: green,blue,orange,yellow; .header { color: first($colors); } .footer{ color: last($colors); } CSS Sass 参考资料: http:/ /www.w3cplus.com/preprocessor/understanding-sass-list.html
Sass特性之map $map: ( key: value, other-key: other-value ); Map语法 $configuration:
( padding: 1em, margin: 0 1em, color: grey ); .element { color: map-get($configuration, color); padding: map-get($configuration, padding); margin: map-get($configuration, margin); &::before { background-color: map-get($configuration, color); } } .element { color: grey; padding: 1em; margin: 0 1em; } .element::before { background-color: grey; } Sass CSS 参考资料: http:/ /www.w3cplus.com/preprocessor/using-sass-maps.html http:/ /www.w3cplus.com/preprocessor/so-you-want-to-play-with-list-maps.html http:/ /www.w3cplus.com/preprocessor/sass-maps.html http:/ /www.w3cplus.com/preprocessor/exploring-maps-in-sass-3-3-part-1.html
如何在项目中使用Sass
组织⽂文件
组织⽂文件 参考资料: http:/ /www.w3cplus.com/preprocessor/organize-that-sass.html http:/ /www.w3cplus.com/preprocessor/architecture-sass-project.html http:/ /www.w3cplus.com/preprocessor/beginner/how-to-structure-a-sass-project.html http:/ /www.w3cplus.com/preprocessor/converting-your-css-project-to-sass.html
Sass+OOCSS <a href="#" class="twitter">Twitter</a> <a href="#" class="facebook">Facebook</a> .twitter { border:3px
solid #000; padding:10px 20px; color:#fff; border-radius:10px; background:red; text-decoration: none; } .facebook { border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; background:blue; text-decoration: none; } .twitter,.facebook{ border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; text-decoration: none; } .twitter { background:red; } .facebook { background:blue; }
Sass+OOCSS <a href="#" class=“btn btn-twitter”>Twitter</a> <a href="#" class=“btn btn-facebook”>Facebook</a> .btn{
border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; text-decoration: none; } .btn-twitter { background:red; } .btn-facebook { background:blue; }
Sass+OOCSS Sass将带来怎样的变⾰革
Sass+OOCSS <a href="#" class=“btn-twitter”>Twitter</a> <a href="#" class=“btn-facebook”>Facebook</a> .btn-twitter { background:
red; border: 3px solid #000; padding: 10px 20px; color: #fff; border-radius: 10px; text-decoration: none; } .btn-facebook { background: blue; border: 3px solid #000; padding: 10px 20px; color: #fff; border-radius: 10px; text-decoration: none; } @mixin btn{ border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; text-decoration: none; } .btn-twitter { background:red; @include btn; } .btn-facebook { background:blue; @include btn; } Sass CSS
Sass+OOCSS <a href="#" class=“btn-twitter”>Twitter</a> <a href="#" class=“btn-facebook”>Facebook</a> .btn, .btn-twitter, .btn-facebook
{ border: 3px solid #000; padding: 10px 20px; color: #fff; border-radius: 10px; text-decoration: none; } .btn-twitter { background: red; } .btn-facebook { background: blue; } .btn{ border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; text-decoration: none; } .btn-twitter { background:red; @extend .btn; } .btn-facebook { background:blue; @extend .btn; } Sass CSS
Sass+OOCSS <a href="#" class=“btn-twitter”>Twitter</a> <a href="#" class=“btn-facebook”>Facebook</a> .btn-twitter, .btn-facebook {
border: 3px solid #000; padding: 10px 20px; color: #fff; border-radius: 10px; text-decoration: none; } .btn-twitter { background: red; } .btn-facebook { background: blue; } %btn{ border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; text-decoration: none; } .btn-twitter { background:red; @extend %btn; } .btn-facebook { background:blue; @extend %btn; } Sass CSS
Sass+OOCSS <a href="#" class=“btn-twitter”>Twitter</a> <a href="#" class=“btn-facebook”>Facebook</a> .btn-twitter, .btn-facebook {
border: 3px solid #000; padding: 10px 20px; color: #fff; border-radius: 10px; text-decoration: none; } .btn-twitter { background: red; } .btn-facebook { background: blue; } $vars:( prefix-class: btn, twitter: red, facebook: blue ); %btn{ border:3px solid #000; padding:10px 20px; color:#fff; border-radius:10px; text-decoration: none; } .#{map-get($vars,prefix-class)}-twitter { background:map-get($vars,twitter); @extend %btn; } .#{map-get($vars,prefix-class)}-facebook { background:map-get($vars,facebook); @extend %btn; } Sass CSS
Sass+OOCSS 参考资料: http:/ /www.w3cplus.com/preprocessor/using-object-oriented-css-with-sass.html http:/ /www.w3cplus.com/preprocessor/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss.html http:/ /www.w3cplus.com/preprocessor/oocss-plus-sass-is-the-best-way-to-css.html http:/ /www.w3cplus.com/preprocessor/oocss-sass.html
http:/ /www.w3cplus.com/preprocessor/bem-modifiers-multiple-classes-vs-extend.html http:/ /www.w3cplus.com/preprocessor/pushing-bem-to-the-next-level-with-sass-3-4.html http:/ /www.w3cplus.com/css/introducing-am-css.html http:/ /www.w3cplus.com/preprocessor/sass-component-10-minutes.html
编写Sass技巧 管理好⽂文件件结构 有效使用Sass变量 减少对混合宏的依赖 拥抱%placeholder 用@function做更多事情 合理嵌套 保持Sass的简单 参考资料: http:/
/www.w3cplus.com/preprocessor/8-tips-help-get-best-sass.html http:/ /www.w3cplus.com/preprocessor/how-to-create-project-with-sass.html http:/ /www.w3cplus.com/preprocessor/keep-sass-simple.html http:/ /www.w3cplus.com/preprocessor/tips-help-level-up-sass.html http:/ /www.w3cplus.com/preprocessor/whats-great-sass.html http:/ /www.w3cplus.com/preprocessor/why-sass.html
学习Sass案例
学习Sass资料
Q & A
Thank You!!!