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 让你更爽的编写 CSS
Search
Praise Song
July 31, 2012
Technology
4
310
SASS 让你更爽的编写 CSS
SASS 让你更爽的编写 CSS
Praise Song
July 31, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
Report of JAWS PANKRATION 2024, a global online event using Amazon IVS
yoshimi0227
1
110
クロージング / MIERUNE JCT - Tokyo 2024
mierune
PRO
0
120
OPENLOGI Company Profile for engineer
hr01
1
11k
Create Inquiry via Bedrock / 生成 AI で問い合わせ品質は変わるのか?思いついてぱっと作ったものを供養してみる
kazzpapa3
1
120
What’s new in Keycloak, the open source IAM?
ahus1
1
120
Passkey Autofill に賭けるマネーフォワード ID - Money Forward Tech Day 2024
nov
1
840
何故負荷試験が大切かを考える
iriikeita
0
110
Vista FinderMx
jtes
0
160
タイミーのレコメンドにおける ABテストの運用
ozeshun
2
300
エムスリーエビデンス創出プロダクトチーム紹介資料 / Introduction of M3 Create Evidence Team
m3_engineering
0
2.2k
コンポーネントテストの手法と その効果を考える
yotahada3
8
1.1k
OPENLOGI Company Profile
hr01
0
53k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Into the Great Unknown - MozCon
thekraken
29
1.4k
What the flash - Photography Introduction
edds
67
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
124
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.2k
Design by the Numbers
sachag
277
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
A designer walks into a library…
pauljervisheath
201
24k
Atom: Resistance is Futile
akmur
261
25k
What's in a price? How to price your products and services
michaelherold
242
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Transcript
颂赞 h#p://qiqicartoon.com
What is SASS?
SASS 是一个 CSS3 扩展,为 CSS 扩展了嵌套规则、变量、混入、继承、函数 等强大的功能。SASS 的使命是让 CSS 更有趣味 J • CSS 超集 • CSS3 扩展 • 使 CSS 更有趣 • SCSS and SASS • Hampton Catlin、Nathan Weizenbaum、Chris Eppstein h#p://sass-‐lang.com/
Features 1、Fully CSS3-‐compaFble 2、Language extensions such as variables,
nesFng, and mixins 3、Many useful funcFons for manipulaFng colors and other values 4、Advanced features like control direcFves for libraries 5、Well-‐forma#ed, customizable output 6、Firebug integraFon
Welcome to the SASS world J
Install SASS $ gem install sass
Variables 从 $ 开始 $variables name : vaiables value;
SCSS SASS
Compile
Compile
Nested SCSS SASS CSS
Mixins SCSS SASS CSS
Selector Inheritance SCSS SASS CSS
Reference Parent 使用 & 语法糖引用父层
Comments 双斜线注释将被忽略
SASSScript Data Types
SASSScript OperaFons
SASSScript OperaFons
SASS Script Oper aFon s-‐ Color
@import SASS CSS • @import “common.css”;
• @import “common” screen; • @import h#p://alipay.com/common.css; • @import url(); • @import “common.scss/sass”; • @import “common”;
@media
Control DirecFves • @if • @while •
@for • @each
@funcFon
回过头来再看 SASS • 大型样式表 • 制定样式规范 •
团队开发 优点 缺点 适用于 • 学习成本低 • 降低样式表维护成本 • 适用于多人开发 • 性能优越 OMG,我无缺点 J
SASS VS LESS • 实现原理不同 • 创建变量的方式不同
• 预编绎机制不同 • 作用域表现不同 • mixin 方式不同 • SASS 比 LESS 的数学运算能力更强 • LESS 没有 SASS 的 Control DirecFve
Hi,Let’s wriFng SASS J @知托付-‐颂赞