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
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
450
#Dubois Challenge 2025: Economics
ajstarks
0
130
Cyber Heart Online Book
hjnasby
0
130
Liquid Iron
mcduckyart
1
110
株式会社バクタム 会社説明資料
bactum
0
250
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
980
今日から意識できるアクセシビリティ
fumiko
0
250
マンガで分かるサービスデザインガイドライン
senryakuka
1
900
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.3k
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
デザイナーとPMの両ロール_3つのポイント
toy1618
1
330
How to get a Tiger to Tulsa
mcduckyart
0
110
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building Applications with DynamoDB
mza
95
6.5k
Side Projects
sachag
455
42k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
How to Ace a Technical Interview
jacobian
278
23k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Typedesign – Prime Four
hannesfritz
42
2.7k
RailsConf 2023
tenderlove
30
1.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/