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
240
SASS实战
分享SASS在实际项目中的应用,包括目录、文件、代码组织,用法上的最佳实践,以及一些实用的插件,真实体验到SASS对开发流程的改善。
三 桂
March 31, 2014
Tweet
Share
More Decks by 三 桂
See All by 三 桂
Cache你好,Cahche再见!
and1coder
0
150
SASS介绍
and1coder
1
230
iconfont实操
and1coder
0
72
PMS新版预研与总结
and1coder
0
110
Web前端开发规范
and1coder
7
300
Other Decks in Technology
See All in Technology
生成AI×マルチテナントSaaSな新規事業を立ち上げる上でテックリードとして気を使った点の紹介
lunastera
0
510
失敗しないOpenJDKの非互換調査
tabatad
0
200
ActiveRecord SQLインジェクションクイズ (Rails 7.1.3.4)
kozy4324
8
2k
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
290
AIを使って小説を書こう!【2024/10/25講演資料】
kamomeashizawa
0
160
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
2
120
6年の歴史×ペタバイト級のデータ基盤のチームを一体化する開発スタイル
plaidtech
PRO
4
110
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
120
Creating Intuitive Developer Tool in Swift
giginet
PRO
0
480
開発健全性の可視化と開発者体験の改善 ~ Compassでエンジニアに活力と生産性を ~
atlassianjapan
0
170
Databricksで構築する初めての複合AIシステム - ML15min
taka_aki
2
1.3k
CI/CDやテスト自動化の開発プロジェクトへの適用
megascus
2
300
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Adopting Sorbet at Scale
ufuk
73
9k
The Language of Interfaces
destraynor
154
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Designing for humans not robots
tammielis
249
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
280
Faster Mobile Websites
deanohume
304
30k
Measuring & Analyzing Core Web Vitals
bluesmoon
0
27
YesSQL, Process and Tooling at Scale
rocio
167
14k
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
谢谢大家!