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

SASS实战

Avatar for 三 桂 三 桂
March 31, 2014
Technology
270
2

 SASS实战

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

Avatar for 三 桂

三 桂

March 31, 2014

More Decks by 三 桂

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

Other Decks in Technology

See All in Technology
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
1.9k
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
350
スクラムで身についていた動き方を、XPで捉え直してみた
Avatar for コドモン開発チーム codmoninc
PRO
1
300
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/6 - 2026/8
Avatar for oracle4engineer oracle4engineer
PRO
0
120
Bet AI Day 2026丨Agentは、「金融」という巨大産業の何を変えられるのか
Avatar for LayerX layerx
PRO
0
1.2k
多摩川(.dev)ランニング入門 / Tamagawa.dev#3
Avatar for FUJIWARA Shunichiro fujiwara3
3
400
Benchmarking Vector Databases: pgvector vs. LanceDB
Avatar for tsho tsho
0
150
omasushiというライブラリを作った
Avatar for polidog polidog
PRO
0
120
AndroidでHDRメディアを「壊さずに」扱う
Avatar for Kazuki Chigita chigichan24
0
420
AI活用の現在地、 ちゃんと見えてますか？/XPfest-2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
160
SQL文一行も書けない人事がCortexもろもろを使って人事業務を楽にしてみる
Avatar for ponponmikan ponponmikankan
0
120
少人数データチームのDevin活用実践事例
Avatar for Runa Yamada runandy16
2
450

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.2k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
810
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
9
970
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
290
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
440
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
580

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