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
96
Radiant CMS
qutic
1
390
Capistrano
qutic
1
140
Other Decks in Technology
See All in Technology
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
110
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.3k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.9k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.2k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Code Reviewing Like a Champion
maltzj
524
40k
A designer walks into a library…
pauljervisheath
207
24k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Become a Pro
speakerdeck
PRO
29
5.4k
How GitHub (no longer) Works
holman
314
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Music & Morning Musume
bryan
46
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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/