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
240
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
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
850
ゆるSRE #11 LT
okaru
1
530
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
基調講演: 生成AIを活用したアプリケーションの開発手法とは?
asei
1
100
QAはソフトウェアエンジニアリングを学んで実践するのが大事なの
ymty
0
120
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
310
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
1
430
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
290
組織とセキュリティ文化と、自分の一歩
maimyyym
3
1.4k
AIエージェント実践集中コース LT
okaru
1
200
Text-to-SQLの評価データセットを作って最新LLMモデルの性能評価をしてみた
gotalab555
3
710
やさしい認証認可
minorun365
PRO
29
11k
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A better future with KSS
kneath
239
17k
The Language of Interfaces
destraynor
158
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Side Projects
sachag
454
42k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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
谢谢大家!