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

SASS实战

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for 三 桂 三 桂
March 31, 2014
Technology
2
260

 SASS实战

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

Avatar for 三 桂

三 桂

March 31, 2014
Tweet

More Decks by 三 桂

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

Other Decks in Technology

See All in Technology
(技術的には)社内システムもOKなブラウザエージェントを作ってみた！
Avatar for Har1101 har1101
0
400
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
Avatar for abemii_ abemii
0
160
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
320
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
240
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
93k
CDK対応したAWS DevOps Agentを試そう_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
550
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
330
生成AIで始める業務改革 - 製造業編 in 福島 -
Avatar for Daiki Kanemitsu daikikanemitsu
1
260
私たち準委任PdEは2つのプロダクトに挑戦する ～ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践～ / 20260212 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
280
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
700
Amazon Bedrock Knowledge Basesチャンキング解説！
Avatar for 野口碧生 aoinoguchi
0
190
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
650

Featured

See All Featured
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
840
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
180
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
120
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.1k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
440
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
260

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. 谢谢大家！