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
250
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
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
Claude Code に プロジェクト管理やらせたみた
unson
6
4.5k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
Geminiとv0による高速プロトタイピング
shinya337
1
280
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
100
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.6k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
310
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
180
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
KATA
mclloyd
30
14k
Speed Design
sergeychernyshev
32
1k
Building Adaptive Systems
keathley
43
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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
谢谢大家!