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
220
SASS实战
分享SASS在实际项目中的应用,包括目录、文件、代码组织,用法上的最佳实践,以及一些实用的插件,真实体验到SASS对开发流程的改善。
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
150
SASS介绍
and1coder
1
220
iconfont实操
and1coder
0
71
PMS新版预研与总结
and1coder
0
98
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
140
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
20240416_devopsdaystokyo
kzkmaeda
1
220
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
560
NgRx Signal Store
rainerhahnekamp
0
150
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
480
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
ServiceNow Knowledge Learning Rise up
manarobot
0
200
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
170
反実仮想機械学習とは何か
usaito
PRO
11
4.2k
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
110
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Clear Off the Table
cherdarchuk
84
310k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
How to Ace a Technical Interview
jacobian
272
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Done Done
chrislema
178
15k
What's new in Ruby 2.0
geeforr
337
31k
Embracing the Ebb and Flow
colly
80
4.1k
Raft: Consensus for Rubyists
vanstee
132
6.3k
How to name files
jennybc
65
93k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
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
谢谢大家!