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
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
AI動画生成ガチャ紹介
piyo7
1
130
The Spectacular Lies of Maps
axbom
PRO
0
110
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
170
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
200
私とデザインの10年
iflection
0
160
Haley's adventure chase
ivettetwin
0
240
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
7 Core Values of Round-L
wired888
0
220
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
580
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
A Tale of Four Properties
chriscoyier
160
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
BBQ
matthewcrist
89
9.7k
Become a Pro
speakerdeck
PRO
29
5.4k
Building an army of robots
kneath
306
45k
Done Done
chrislema
184
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Site-Speed That Sticks
csswizardry
10
690
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
A designer walks into a library…
pauljervisheath
207
24k
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/