Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SASS实战

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for 三 桂 三 桂
March 31, 2014
Technology
260
2

 SASS实战

分享SASS在实际项目中的应用，包括目录、文件、代码组织，用法上的最佳实践，以及一些实用的插件，真实体验到SASS对开发流程的改善。

Avatar for 三 桂

三 桂

March 31, 2014

More Decks by 三 桂

See All by 三 桂
Cache你好，Cahche再见！
Avatar for 三 桂 and1coder
0
160
SASS介绍
Avatar for 三 桂 and1coder
1
250
iconfont实操
Avatar for 三 桂 and1coder
0
87
PMS新版预研与总结
Avatar for 三 桂 and1coder
0
130
Web前端开发规范
Avatar for 三 桂 and1coder
7
310

Other Decks in Technology

See All in Technology
[OpsJAWS 40]リリースしたら終わり、じゃなかった。セキュリティ空白期間をAWS Security Agentで埋める
Avatar for sh_fk2 sh_fk2
3
200
Amazon S3 Filesについて
Avatar for Yuuki Yamashita yama3133
2
180
Snowflake Intelligence導入で 分かった活用のコツ
Avatar for wonohe wonohe
0
110
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
7.3k
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
[最強DB講義]推薦システム | 基礎編
Avatar for RecSysLab recsyslab
PRO
1
140
Azure Lifecycle with Copilot CLI
Avatar for Toru Makabe torumakabe
3
980
ネットワーク運用を楽にするAWS DevOps Agent活用法！！ / 20260421 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
180
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
10
78k
ワールドカフェI ／チューターを改良する / World Café I and Improving the Tutors
Avatar for Kenji Saito ks91
PRO
0
250
システムは「動く」だけでは 足りない - 非機能要件・分散システム・トレードオフの基礎
Avatar for nwiizo nwiizo
29
9.3k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
74k

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
820
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
430
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.6k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.1k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
160
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
150
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
200
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k

Transcript

  1. SASS实战 Samgui @ 2013.08.30

  2. 目录结构 “保持良好的目录结构能让你更高效，项目维护性更高”

  3. .scss文件与编译后的.css文件同目录

  4. 代码结构 “保持良好的代码结构能让你更高效，项目维护性更高”

  5. None
  6. None

  7. SVN自动注释设置 C:\Users\[samgui]\AppData\Roaming\Subversion\config 开启 enable-auto-props = yes (没有则添加) 添加 *.scss =

    svn:keywords=Id

  8. MIXIN应用场景 “避免重复书写一`大`段代码，同时又具有通用性”

  9. 举个栗子

  10. 来几个实用的

  11. 还可以更多... “把常见的解决方案沉淀成库,统一维护随处取用”

  12. EXTEND应用场景 “避免重复书写一`大`段`相对`固定的代码”

  13. 举个栗子

  14. PLACEHOLDERS才是真爱 ! “EXTEND虽好,但真爱容不下半点瑕疵”

  15. 真爱闪亮登场

  16. 蛋是.... “但是目前(sass 3.x)还是存在一点小遗憾，@import没有 重复导入检测功能，导致生成重复的代码”

  17. 但是...

  18. Compass Sprites “`胸器`出场”

  19. 基本用法

  20. 图片合并前后对比

  21. 编译生成的CSS

  22. 建议 “单独一个文件进行图片合并，防止一起编译导致等待编 译过程时间过长”

  23. Autoprefixer 神来之笔 “compass已很好的解决了浏览器前缀问题，但并不完美 autoprefixer真正解决了此问题，并了却你的后顾无忧” Autoprefixer一个以最好的方式处理浏览器前缀的后处理程序 http://goo.gl/CvnTlM

  24. Sass-remote 无痛协作 “RemoteSass是一个小插件，通过它Sass可以通过 HTTP/S导入远程的.sass/.scss样式文件。有了它，我们 可以为多个应用建立一个集中化的服务来管理和共享样式 资源” SASS实战之RemoteSass插件介绍http://goo.gl/SLinSG

  25. 谢谢大家！