CSS with superpowers ― 
SASS! 
Ferdinand Vogler 
@ferdinandvogler
Ferdinand Vogler 
@ferdinandvogler 
Communication Design student, 
Working student at YOU IS NOW, 
Freelance Designer and ...
OpenTechSchool 
opentechschool.org 
Berlin, Brussels, Dortmund, Hamburg, Istanbul, Jerusalem, London, 
Melbourne, Nairobi,...
“If you really want to learn how to do something, try 
teaching other people how to do it.” 
– Steve Krug, Rocket Surgery ...
Why SASS?
1996 
First W3C recommendation (CSS1)
2014
Preprocessors
Advantages 
❏ Variables 
❏ Nesting 
❏ Reusable blocks 
❏ Fewer HTTP requests 
❏ Conditionals, Loops & Functions 
❏ Mathema...
How does it work? 
style.scss Preprocessor style.css
style.css 
scss 
a { 
color: gray; 
} 
a:hover { 
color: black; 
font-weight: bold; 
} 
p { 
margin: 10px; 
}
“Later, when you’ve become fluent with Sass 
[…], it really does feel like a natural extension 
of CSS — as if it’s fillin...
ಠ_ಠ
Nope.
SASS? 
SCSS? 
?
style.scss style.sass 
@mixin border-radius($radius) { 
-webkit-border-radius: $radius; 
-moz-border-radius: $radius; 
-ms...
Install SASS
Ruby Gems 
Mac 
Open Terminal: ruby -v 
Windows 
Install from www.rubyinstaller.org
Installation 
Mac 
sudo gem install sass 
Windows 
gem install sass
Apps 
CodeKit 
Prepros 
Scout 
Koala 
Compass 
Hammer 
Mixture 
LiveReload 
…
<> 
Live-Coding 
Basic Terminal usage
Commands 
cd Change directory 
cd .. Go back one directory 
cd ~ Go to Home 
ls List directory 
touch Create file 
rm Remo...
<> 
Live-Coding 
SASS in the command line
Basic SASS commands 
sass input.scss output.css Compile once 
sass --watch input.scss:output.css Watch file 
sass --watch ...
Partials 
|stylesheets 
|--style.css 
/* Buttons */ 
/* Panels */ 
/* Lists */ 
CSS
Partials 
|stylesheets 
|--partials 
|------_buttons.scss 
|------_panels.scss 
|------_lists.scss 
|--vendor 
|----_norma...
<> 
Live-Coding 
SASS playground
Variables 
$color = red; 
$darkercolor = darken($color, 25%); 
$lightercolor = lighten($color, 15%); 
adjust-hue(); 
satur...
Nesting 
.my-style { 
.highlight { 
a { 
&:hover { 
} 
} 
} 
}
Fewer HTTP requests 
|stylesheets 
|--partials 
|------_buttons.scss 
|------_panels.scss 
|------_lists.scss 
|--vendor 
...
Conditionals, Loops & Functions 
@function sample($var1, $var2) { 
… } 
@for $i from 1 through 10 { 
… } 
@mixin block($va...
Scratching the surface
Further information 
❏ www.thesassway.com 
❏ www.sass-lang.com 
❏ www.leveluptuts.com/tutorials/sass-tutorials 
❏ Dan Cede...
Questions? Feedback? 
@ferdinandvogler
CSS with superpowers - SASS!
Nächste SlideShare
Wird geladen in …5
×

CSS with superpowers - SASS!

640 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
640
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

CSS with superpowers - SASS!

  1. 1. CSS with superpowers ― SASS! Ferdinand Vogler @ferdinandvogler
  2. 2. Ferdinand Vogler @ferdinandvogler Communication Design student, Working student at YOU IS NOW, Freelance Designer and Web-Developer
  3. 3. OpenTechSchool opentechschool.org Berlin, Brussels, Dortmund, Hamburg, Istanbul, Jerusalem, London, Melbourne, Nairobi, Ramallah, RheinMain, Stockholm, San Francisco, Tel- Aviv, Washington, Zürich
  4. 4. “If you really want to learn how to do something, try teaching other people how to do it.” – Steve Krug, Rocket Surgery Made Easy
  5. 5. Why SASS?
  6. 6. 1996 First W3C recommendation (CSS1)
  7. 7. 2014
  8. 8. Preprocessors
  9. 9. Advantages ❏ Variables ❏ Nesting ❏ Reusable blocks ❏ Fewer HTTP requests ❏ Conditionals, Loops & Functions ❏ Mathematics Don’t Repeat Yourself
  10. 10. How does it work? style.scss Preprocessor style.css
  11. 11. style.css scss a { color: gray; } a:hover { color: black; font-weight: bold; } p { margin: 10px; }
  12. 12. “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
  13. 13. ಠ_ಠ
  14. 14. Nope.
  15. 15. SASS? SCSS? ?
  16. 16. 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
  17. 17. Install SASS
  18. 18. Ruby Gems Mac Open Terminal: ruby -v Windows Install from www.rubyinstaller.org
  19. 19. Installation Mac sudo gem install sass Windows gem install sass
  20. 20. Apps CodeKit Prepros Scout Koala Compass Hammer Mixture LiveReload …
  21. 21. <> Live-Coding Basic Terminal usage
  22. 22. Commands cd Change directory cd .. Go back one directory cd ~ Go to Home ls List directory touch Create file rm Remove file mkdir Make directory rmdir Remove directory
  23. 23. <> Live-Coding SASS in the command line
  24. 24. Basic SASS commands sass input.scss output.css Compile once sass --watch input.scss:output.css Watch file sass --watch scss:css Watch folder
  25. 25. Partials |stylesheets |--style.css /* Buttons */ /* Panels */ /* Lists */ CSS
  26. 26. 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
  27. 27. <> Live-Coding SASS playground
  28. 28. Variables $color = red; $darkercolor = darken($color, 25%); $lightercolor = lighten($color, 15%); adjust-hue(); saturate(); mix(); grayscale(); desaturate(); invert(); complement();
  29. 29. Nesting .my-style { .highlight { a { &:hover { } } } }
  30. 30. Fewer HTTP requests |stylesheets |--partials |------_buttons.scss |------_panels.scss |------_lists.scss |--vendor |----_normalize.scss |--style.scss style.css
  31. 31. Conditionals, Loops & Functions @function sample($var1, $var2) { … } @for $i from 1 through 10 { … } @mixin block($var1) { @if $var1 == large { … } }
  32. 32. Scratching the surface
  33. 33. Further information ❏ www.thesassway.com ❏ www.sass-lang.com ❏ www.leveluptuts.com/tutorials/sass-tutorials ❏ Dan Cederholm – “SASS for Web-Designers” ❏ www.sassmeister.com
  34. 34. Questions? Feedback? @ferdinandvogler

×