Expanding Your Sass Arsenal

Anthony DiSpezio

@adispezio

FOLLOW ALONG...

OR USE LINKS

Sass has a TON of features

Share the good, avoid the bad

“Talk”shop Agenda

Functions, Mixins & Extends

BREAK

Maps & Loops

BREAK

Bulletproofing

BREAK

Media Query Techniques

Questions/Discussion

“That is a lot of topics!”

Live Demos

example 

Mixins 1

Follow the live presentation

example 

Mixins 1

Or use the static link page

Please ask questions

Let’s get started!

Functions, Mixins
& Extends

@function

Functions accept inputs...

And return values.

You’re already using functions!

background: lighten(blue, 10%);

Built-in Sass functions

Colors


Strings


Numbers


Lists/maps


Selectors


Introspectives

Writing custom functions 

example 

Functions need an input arg

Functions need to return a value

Functions should use the variable in some way

Great replacement for
1:1 property mixins

@mixin double-width($value) {
    width: $value * 2;
}

.box {
    @include double-width(40px);
}
@function double-width($value) {
    @return $value * 2;
}

.box {
    width: double-width(40px);
}

okay

better!

example 

@mixin

example 

The "building blocks" of Sass

Like functions, mixins accept arguments

Arguments can have defaults

Mixins shine with repetition

but there's a downside...

@mixin button($background: grey) {
    border: 3px solid black;
    background: $background;    
}

.search-button {
    @include button(blue);
}

.cancel-button {
    @include button(red);
}

.success-button {
    @include button(green);
}
.search-button {
  border: 3px solid black;
  background: blue;
}

.cancel-button {
  border: 3px solid black;
  background: red;
}

.success-button {
  border: 3px solid black;
  background: green;
}

static properties are repeated As Well :(

@extend

.button-base {
    border: 3px solid black;
}

.search-button {
    @extend .button-base;
}

.cancel-button {
    @extend .button-base;
}
.button-base,
.search-button,
.cancel-button {
    border: 3px solid black;
}

@extend groups the extended selectors together

%button-base {
    border: 3px solid black;
}

.search-button {
    @extend .button-base;
}

.cancel-button {
    @extend .button-base;
}
.search-button,
.cancel-button {
    border: 3px solid black;
}

placeholder selectors

use @mixin for dynamic properties

use @extend for static properties

Use @extend wisely!

@mixin button($background) {
    background: $background;
}

%button-base {
    border: 3px solid black;
}

.search-button {
    @extend .button-base;
    @include background(blue);
}

.cancel-button {
    @extend .button-base;
    @include background(red);
}
.search-button,
.cancel-button {
    border: 3px solid black;
}

.search-button {
  background: blue;
}

.cancel-button {
  background: red;
}

example 

Let's add this to our buttons

let's put our cleaner mixin to work

@mixin button($background) {
    background: $background;
}
@mixin button($name, $background) {
    .#{$name}-button {
        @extend %button-base;
        background: $background;
    }
}

%button-base {
    border: 3px solid black;
}

@include button("search", blue);
@include button("cancel", red);
.search-button,
.cancel-button {
    border: 3px solid black;
}

.search-button {
  background: blue;
}

.cancel-button {
  background: red;
}

Moving the class inside the mixin

example 

// _variables.scss
$search-background: blue;
$cancel-background: red;


// _buttons.scss
@mixin button($name, $background) {
    .#{$name}-button {
        @extend %button-base;
        background: $background;
    }
}

%button-base {
    border: 3px solid black;
}

@include button("search", $search-background);
@include button("cancel", $cancel-background);
.search-button,
.cancel-button {
    border: 3px solid black;
}

.search-button {
  background: blue;
}

.cancel-button {
  background: red;
}

Separate the logic from the variables

example 

CONSTRUCTOR-ESQUE

Break Time

Maps & Loops

Maps

$map: (
    key: value,
    key: value,
    key: value
}

A map is a list of keys and values

var map = {
    key: value,
    key: value,
    key: value
};

Similar to JS Objects

Let’s look at a simple example

example 

Retrieving values from maps

Let's add maps to our buttons

example 

Loops

Iterate over numbers,
lists, and maps

@for, @each, @while

example 

loops can be very fun

example 

And also very practical

example 

Adding conditionals

example 

Adding FUNCTIONS

example 

Break Time

Bulletproofing Sass

Code is a not an asset,
it's a liability

-LOTS OF FOLKS-

So what’s the “Bullet?”

THE BULLET IS SOMEONE MISUSING YOUR “BEAUTIFUL” SASS CODE

THAT SOMEONE IS FUTURE YOU

MOST LIKELY

SASS is here to help!

@debug, @warn and @error

@debug is great for testing

example 

@warn for NON-FATAL Issues

example 

@warn FOR REALS

@warn IN OUR EXAMPLE

example 

“Give a warning and a way to make it go away

-CHRIS EPPSTEIN-

@error will stop COMPILE

example 

EFFECTIVE warnings and errors

The "Why" Game

“The mixin failed”

Why?

“The mixin received the wrong input”

Boom

“The mixin expected a number but received a string”

Why?

Back to the buttonS!

example 

Even better PART OF bulletproofing?

anticip......

...pation

example 

Media Queries

You've PROBably used a media query

@media (max-width: 600px) {
  img {
    width: 100%;
  }
}

Using @content

example 

Adding Variables

example 

example 

MEdia Query LIBRARIES

QUESTION TIME

My PARTING ADVICE

Have fun!

Always choose the sensible option

Clever is not always better

Don't stress, even in production

Share what you learn

Thank you