View
286
Download
2
Category
Preview:
DESCRIPTION
These are my slides from the Meetup "CSS with superpowers - SASS!" at ImmobilienScout24 on November 6, 2014. Description: Preprocessors for CSS have become the industry standard and you'll be reading more and more about them all over the tech community. They're named LESS, Stylus or SASS. Preprocessors make CSS more flexible, maintainable and fill in where CSS has its limits and drawbacks.
Citation preview
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