Getting Sassy with CSS Erin Smith 

What we are covering: What are CSS preprocessors What advantages do they have How to get set up to use them yourself 

No content

No content

Input Output 

Basics .scss .sass Uses CSS syntax Indentation instead of brackets Newlines instead of semicolons Other modifications Can be easier to read and write 

$variables 

SCSS CSS $yellow: #fce473; .quote { border-left: 5px solid $yellow; } .quote { border-left: 5px solid #fce473; } 

SCSS CSS $yellow: #fce473; $pink: #c71585; $green: #32cd32; $blue: #1d90ff; $primary-color: $green; .quote { border-left: 5px solid $primary-color; } .button { background: $primary-color; } .sidebar a:hover { border-bottom-color: $primary-color; } .footer a { color: $primary-color; } .quote { border-left: 5px solid #32cd32; } .button { background: #32cd32; } .sidebar a:hover { border-bottom-color: #32cd32; } .footer a { color: #32cd32; } 

SCSS CSS $yellow: #fce473; $pink: #c71585; $green: #32cd32; $blue: #1d90ff; $primary-color: $pink; .quote { border-left: 5px solid $primary-color; } .button { background: $primary-color; } .sidebar a:hover { border-bottom-color: $primary-color; } .footer a { color: $primary-color; } .quote { border-left: 5px solid #c71585; } .button { background: #c71585; } .sidebar a:hover { border-bottom-color: #c71585; } .footer a { color: #c71585; } 

Math 

$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); 

Nesting 

SCSS CSS nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 

@imports 

No content

SCSS //main.scss /* base */ @import “base/reset”; @import “base/typography”; /* components */ @import “components/buttons”; @import “components/nav”; @import “components/dropdown”; |— base/ | |— _reset.scss #Reset/normalize | |— _typography.scss #Typography rules | |— components/ | |— _buttons.scss #Buttons | |— _navigation.scss #Navigation | |— _dropdown.scss #Dropdown 

@mixins 

SCSS CSS @mixin overlay() { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .modal-background { @include overlay(); background: black; opacity: 0.9; } .modal-background { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: black; opacity: 0.9; } 

SCSS CSS @mixin overlay() { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .modal-background { @include overlay(); background: black; opacity: 0.9; } .product-link { @include overlay(); background: blue; opacity: 0.6; } .modal-background { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: black; opacity: 0.9; } .product-link { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: blue; opacity: 0.6; } 

SCSS CSS @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(3px); } .box { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } 

$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); @mixin columnMaker($numPerRow, $margin) { width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); &:nth-child(n) { margin-bottom: $margin; margin-right: $margin; } &:nth-child(#{$numPerRow}n) { margin-right: 0; margin-bottom: 0; } } 

@extend 

SCSS CSS %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } %equal-heights { display: flex; flex-wrap: wrap; } .success { @extend %message-shared; border-color: green; } .error { @extend %message-shared; border-color: red; } .warning { @extend %message-shared; border-color: yellow; } .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } 

@extend - rulesets are inherently related - near to each other in the code @mixin - inject dynamic values into repeated construct - Sassy copy/paste 

Loops 

@if @for @each @while 

SCSS CSS $list: adam john wynn mason kuroir; @mixin author-images { @each $author in $list { .photo-#{$author} { background: image-url(‘/images/#{$author}.png’) no-repeat; } } } .author-bio { @include author-images; } .author-bio .photo-adam { background: url(‘/images/adam.png’) no-repeat; } .author-bio .photo-john { background: url(‘/images/adam.png’) no-repeat; } .author-bio .photo-wynn { background: url(‘/images/adam.png’) no-repeat; } .author-bio .photo-mason { background: url(‘/images/adam.png’) no-repeat; } .author-bio .photo-kuroir { background: url(‘/images/adam.png’) no-repeat; } 

Pre-built Functions 

lighten($color, $amount) grayscale($color) complement($color) unquote($string) to-upper-case($string) random() 

$notification-confirm: hsla(101, 72%, 37%, 1); $notification-warning: #ffc53a; $notification-alert: rgb(172, 34, 34); %notification { border-radius: 10px; display: block; font-size: 1.5em; font-family: sans-serif; padding: 1em 2em; margin: 1em auto; width: 30%; text-align: center; } SCSS 

@function set-notification-text-color($color) { @if (lightness($color) > 50) { @return #000000; } @else { @return #ffffff; } } .notification { @extend %notification; } .notification-confirm { background: $notification-confirm; color: set-notification-text-color($notification-confirm); } .notification-warning { background: $notification-warning; color: set-notification-text-color($notification-warning); } .notification-alert { background: $notification-alert; color: set-notification-text-color($notification-alert); } SCSS 

Getting Started WordPress.com Plugin WP-SCSS Command Line NPM: nom install -g sass Chocolatey: choco install sass Homebrew: brew install sass/sass/sass sass styles.scss styles.css Application CodeKit Compass.app Koala PHPStorm 

Resources: sass-lang.com marksheet.io thesassway.com sassisfaction.com