CSS with superpowers ―
SASS!
Ferdinand Vogler@ferdinandvogler
Ferdinand Vogler@ferdinandvogler
Communication Design student, Working student at YOU IS NOW,
Freelance Designer and Web-Developer
OpenTechSchoolopentechschool.org
Berlin, Brussels, Dortmund, Hamburg, Istanbul, Jerusalem, London, Melbourne, Nairobi, Ramallah, RheinMain, Stockholm, San Francisco, Tel-
Aviv, Washington, Zürich
“If you really want to learn how to do something, try teaching other people how to do it.”
– Steve Krug, Rocket Surgery Made Easy
Why SASS?
1996First W3C recommendation (CSS1)
2014
Preprocessors
Advantages
❏ Variables
❏ Nesting
❏ Reusable blocks
❏ Fewer HTTP requests
❏ Conditionals, Loops & Functions
❏ Mathematics
Don’t Repeat Yourself
How does it work?
style.scss style.cssPreprocessor
style.css
a { color: gray;}
a:hover { color: black; font-weight: bold;}
p { margin: 10px;}
style.scss
“Later, when you’ve become fluent with Sass […], it really does feel like a natural extension
of CSS — as if it’s filling holes we all wish were filled by the CSS spec itself.”
Dan Cederholm in alistapart.com/article/why-sass
ಠ_ಠ
Nope.
?SASS?
SCSS?
style.scss style.sass
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}
#main { background: gray; width: 50%; @include border-radius(4px);
p { background: lightgray; color: black; }}
=border-radius($radius)––-webkit-border-radius: $radius––-moz-border-radius: $radius––-ms-border-radius: $radius––border-radius: $radius
#main ––background: gray––width: 50%––+border-radius(4px)
––p––––background: lightgray––––color: black
Install SASS
Ruby GemsMacOpen Terminal: ruby -v
WindowsInstall from www.rubyinstaller.org
InstallationMacsudo gem install sass
Windowsgem install sass
AppsCodeKitPreprosScoutKoalaCompassHammerMixtureLiveReload…
<>Live-Coding
Basic Terminal usage
Commandscd Change directory cd .. Go back one directory cd ~ Go to Homels List directory
touch Create filerm Remove filemkdir Make directoryrmdir Remove directory
<>Live-CodingSASS in the command line
Basic SASS commandssass input.scss output.css Compile once
sass --watch input.scss:output.css Watch filesass --watch scss:css Watch folder
Partials
|stylesheets|--style.css
/* Buttons */
/* Panels */
/* Lists */
CSS
Partials|stylesheets
|--partials
|------_buttons.scss
|------_panels.scss
|------_lists.scss
|--vendor
|----_normalize.scss
|--style.scss
@import “partials/buttons”;
@import “partials/panels”;
@import “partials/lists”;
// Third-party stylesheets
@import “vendor/normalize”;
SCSS
style.css
<>Live-Coding
SASS playground
Variables
$color = red;$darkercolor = darken($color, 25%);$lightercolor = lighten($color, 15%);
adjust-hue(); saturate(); mix(); grayscale(); desaturate(); invert(); complement();
Nesting
.my-style {.highlight {a {&:hover {}
}}
}
Fewer HTTP requests
|stylesheets
|--partials
|------_buttons.scss
|------_panels.scss
|------_lists.scss
|--vendor
|----_normalize.scss
|--style.scss
style.css
Conditionals, Loops & Functions
@function sample($var1, $var2) {… }
@for $i from 1 through 10 {… }
@mixin block($var1) {@if $var1 == large {… }
}
Scratching the surface
Further information
❏ www.thesassway.com
❏ www.sass-lang.com
❏ www.leveluptuts.com/tutorials/sass-tutorials
❏ Dan Cederholm – “SASS for Web-Designers”
❏ www.sassmeister.com
Questions? Feedback?@ferdinandvogler
Recommended
