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
三 桂
March 31, 2014
Technology
2
250
SASS实战
分享SASS在实际项目中的应用,包括目录、文件、代码组织,用法上的最佳实践,以及一些实用的插件,真实体验到SASS对开发流程的改善。
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
160
SASS介绍
and1coder
1
240
iconfont实操
and1coder
0
78
PMS新版预研与总结
and1coder
0
120
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.1k
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
170
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
390
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.3k
【Oracle Cloud ウェビナー】【入門&再入門】はじめてのOracle Cloud Infrastructure [+最新情報]
oracle4engineer
PRO
1
110
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
120
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
3.8k
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
170
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
330
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
30
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Visualization
eitanlees
146
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
A designer walks into a library…
pauljervisheath
207
24k
A Tale of Four Properties
chriscoyier
160
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Transcript
SASS实战 Samgui @ 2013.08.30
目录结构 “保持良好的目录结构能让你更高效,项目维护性更高”
.scss文件与编译后的.css文件同目录
代码结构 “保持良好的代码结构能让你更高效,项目维护性更高”
None
None
SVN自动注释设置 C:\Users\[samgui]\AppData\Roaming\Subversion\config 开启 enable-auto-props = yes (没有则添加) 添加 *.scss =
svn:keywords=Id
MIXIN应用场景 “避免重复书写一`大`段代码,同时又具有通用性”
举个栗子
来几个实用的
还可以更多... “把常见的解决方案沉淀成库,统一维护随处取用”
EXTEND应用场景 “避免重复书写一`大`段`相对`固定的代码”
举个栗子
PLACEHOLDERS才是真爱 ! “EXTEND虽好,但真爱容不下半点瑕疵”
真爱闪亮登场
蛋是.... “但是目前(sass 3.x)还是存在一点小遗憾,@import没有 重复导入检测功能,导致生成重复的代码”
但是...
Compass Sprites “`胸器`出场”
基本用法
图片合并前后对比
编译生成的CSS
建议 “单独一个文件进行图片合并,防止一起编译导致等待编 译过程时间过长”
Autoprefixer 神来之笔 “compass已很好的解决了浏览器前缀问题,但并不完美 autoprefixer真正解决了此问题,并了却你的后顾无忧” Autoprefixer一个以最好的方式处理浏览器前缀的后处理程序 http://goo.gl/CvnTlM
Sass-remote 无痛协作 “RemoteSass是一个小插件,通过它Sass可以通过 HTTP/S导入远程的.sass/.scss样式文件。有了它,我们 可以为多个应用建立一个集中化的服务来管理和共享样式 资源” SASS实战之RemoteSass插件介绍http://goo.gl/SLinSG
谢谢大家!