Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
SASS实战
Search
三 桂
March 31, 2014
Technology
290
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
SASS实战
分享SASS在实际项目中的应用,包括目录、文件、代码组织,用法上的最佳实践,以及一些实用的插件,真实体验到SASS对开发流程的改善。
三 桂
March 31, 2014
Transcript
25 slides
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
谢谢大家!
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
170
SASS介绍
and1coder
1
280
iconfont实操
and1coder
0
120
PMS新版预研与总结
and1coder
0
150
Web前端开发规范
and1coder
7
370
Other Decks in Technology
See All in Technology
自治体AIコンタクトセンター、何をどこに任せる?~Amazon Connect Customer +Amazon Bedrockの実践知~ / 20261107 Satoshi Torano
shift_evolve
PRO
1
130
81天的 AI Agent 軟體開發團隊治理實務分享
regionbbs
0
160
Linuxネットワークスタック進化の軌跡: 過去10年の歩みと最新トレンド
orimanabu
2
510
Shared Signals Framework 仕様解説
oidfj
0
410
LLM 基盤と kagent v0 を全部 k8s に入れてみた / Deploy both LLM and kagent v0 in k8s
kota2and3kan
0
160
AIが会計業務の伴走者に。 マネーフォワード クラウド会計MCPサーバーで実現するAI前提の新しい業務プロセス
nobitabashi
0
100
田んぼの見回りをIoTで減らしたい!水位監視から電池駆動カメラまでの試行錯誤
itosoft
1
120
The Author Pays
hiccupps
0
180
属人化したISMS運用をGitHubとAIで仕組み化した1年間の記録
sioncojp
4
2.4k
AWSを利用する上で知っておきたい名前解決の話 2026
nagisa53
5
3.5k
[dbts2026]数十PBの超巨大データ×AI活用を支えるSnowflakeの実力〜大規模環境におけるアーキテクチャと運用のリアル〜
y_matsubara
0
140
人間+AIを「チーム」としてプロセスを再設計する
littlehands
0
140
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
Accessibility Awareness
sabderemane
1
300
Code Reviewing Like a Champion
maltzj
529
40k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
460
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
320
Paper Plane (Part 1)
katiecoart
PRO
3
12k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
630
The agentic SEO stack - context over prompts
schlessera
0
1k
Navigating Team Friction
lara
192
16k
SEO for Brand Visibility & Recognition
aleyda
0
4.9k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k