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
radiantmagic
March 24, 2012
Design
2
1.6k
Sass
CSS wie es eigentlich sein sollte
radiantmagic
March 24, 2012
Tweet
Share
Other Decks in Design
See All in Design
今日から意識できるアクセシビリティ
fumiko
0
250
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
アクセシビリティに取り組むメリット
magi1125
1
190
#Dubois Challenge 2025: Economics
ajstarks
0
130
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
450
AI時代に淘汰されないデザインのしごと
akinen
1
140
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.7k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
370
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
620
Cyber Heart Online Book
hjnasby
0
130
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
140
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Music & Morning Musume
bryan
46
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Building Applications with DynamoDB
mza
95
6.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Embracing the Ebb and Flow
colly
86
4.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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
Andere Plattformen ‣ 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 ‣ https://radiantmagic.com/