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
Designship 2023|想いを可視化するデザインの力
weddingpark
0
240
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
顕在化されていない期待、デザインの灯台
daitorii
1
1.1k
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
Sociotechnical design for software and human systems
xinyao
2
490
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
520
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
230
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
A designer walks into a library…
pauljervisheath
200
23k
Debugging Ruby Performance
tmm1
70
11k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Gamification - CAS2011
davidbonilla
76
4.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building Applications with DynamoDB
mza
88
5.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Producing Creativity
orderedlist
PRO
337
39k
Designing the Hi-DPI Web
ddemaree
276
33k
A Philosophy of Restraint
colly
197
16k
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/