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
プロダクトデザインは子育て/Product design is parenting
medley
0
310
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
180
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
3.6k
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
330
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
300
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
31
2.6k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
43
6.8k
How to train your dragon (web standard)
notwaldorf
73
5.2k
KATA
mclloyd
15
12k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Docker and Python
trallard
34
2.7k
Adopting Sorbet at Scale
ufuk
68
8.6k
In The Pink: A Labor of Love
frogandcode
138
21k
Building Applications with DynamoDB
mza
88
5.6k
Visualization
eitanlees
136
14k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
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/