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
ホワイト化するこの世界の片隅に
hisayosky
0
150
意志と、デザインと、ときどきお金
transit_kix
2
2.3k
Tuzukuru解説ブック
atsumaru1377
0
120
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
320
Sunny Day Storyboard
ctagulao98
0
110
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
140
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.4k
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
190
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.3k
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
370
他人事じゃないWebアクセシビリティ入門
arihiro17
0
260
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Git: the NoSQL Database
bkeepers
PRO
423
63k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
How to Ace a Technical Interview
jacobian
273
22k
Raft: Consensus for Rubyists
vanstee
133
6.3k
The Mythical Team-Month
searls
217
42k
Facilitating Awesome Meetings
lara
43
5.6k
Embracing the Ebb and Flow
colly
80
4.2k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
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/