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