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 - CSS wie es eigentlich sein sollte
Search
qutic
November 24, 2012
Technology
0
70
Sass - CSS wie es eigentlich sein sollte
qutic
November 24, 2012
Tweet
Share
More Decks by qutic
See All by qutic
Server-Monitoring mit Zabbix
qutic
1
380
kivitendo REST API
qutic
0
160
Private Cloud mit SmartOS und Project FiFo
qutic
0
67
Open Source - eine Alternative zu FileMaker?
qutic
0
690
Server-Orchestration mit Rundeck
qutic
0
99
Erstellung hochverfügbarer Dienste mit Consul
qutic
0
62
KVM mit OmniOS
qutic
0
97
Radiant CMS
qutic
1
390
Capistrano
qutic
1
140
Other Decks in Technology
See All in Technology
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
推し書籍📚 / Books and a QA Engineer
ak1210
0
140
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Rails Girls Zürich Keynote
gr2m
95
14k
Making Projects Easy
brettharned
116
6.3k
Building an army of robots
kneath
306
45k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to Ace a Technical Interview
jacobian
278
23k
Designing Experiences People Love
moore
142
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Transcript
© 2012
[email protected]
Sass CSS wie es eigentlich sein sollte
Was ist Sass? ‣ Sass - Syntactically Awesome Stylesheets ‣
Sass ist ein CSS Präprozessor, der Sass zu CSS ‚kompiliert‘ ‣ Folgt dem DRY Prinzip von Ruby On Rails - Don't repeat yourself ‣ Bestandteil der Rails 3 Asset Pipeline ‣ Fazit: Sass ist CSS wie es eigentlich sein sollte
Sass-Features ★ Nesting ★ Variablen ★ Funktionen ★ Mixins ★
Vererbung
Nesting
Variablen
Funktionen
Mixins
Vererbung
Alternative Syntax Sass vs. SCSS vs. CSS
Installation gem install sass
Präprozessor ‣ Syntax-Prüfung erkennt Schreibfehler ‣ @import - alles in
einer Datei ‣ Optimiertes CSS (minify, gruppierte Selektoren) ‣ $ sass --watch input-dir:output-dir ‣ $ sass --style compressed input.sass output.css
Sass-Tools und -Libraries github.com/search?q=sass&type=Repositories css2sass sass-twitter-bootstrap tenplate
Wo ist Sass noch drin? ‣ Typo3: Sassify ‣ Wordpress:
Sass for Wordpress ‣ PHP: PHamlP ‣ Python: python-sass ‣ RadiantMagic: Sass- & SCSS-Filter build in
?
Lesenswertes ‣ http://sass-lang.com ‣ http://compass-style.org/ ‣ http://thoughtbot.com/bourbon/ ‣ http://www.webkrauts.de/2011/12/04/sass-compas/ ‣
http://www.alistapart.com/articles/getting-started-with-sass/ ‣ http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass ‣ https://github.com/seaofclouds/sass-textmate-bundle ‣ https://github.com/search?q=sass&type=Repositories ‣ http://css2sass.heroku.com/ ‣ https://radiantmagic.com/