So Sassy!

An introduction to Sass
 
Presenter: Andrew Koebbe

Web: andrewkoebbe.com

Twitter: @andrewkoebbe

LinkedIn: linkedin.com/in/andrewkoebbe

 

 

Live Slide Stream: http://bit.ly/sass-foc

Psst... Hey Andrew, are you recording?

Ask me about...

  • MST3k
  • Sous Vide Cooking
  • Coding to save babies' butts
  • Marshmallow cannons!

Andrew Koebbe

Development Manager

PHP (Symfony)/JS (Ext.js)

Quick Show of Hands

My Love/Hate Relationship With CSS

Back in the '90s

<!-- Start: Local menus -->
<TD BGCOLOR='#6699CC' HEIGHT=20 VALIGN='MIDDLE' NOWRAP COLSPAN=4>
    <FONT COLOR='#FFFFFF' FACE='Verdana, Arial' SIZE=1><B>
          <A STYLE='color:#FFFFFF;text-decoration:none;'
                       HREF='/web/19981205060735/http://microsoft.com/isapi/gomscom.asp?target=/' TARGET='_top'><FONT
            COLOR='#FFFFFF'>Home</FONT></A>  <FONT COLOR='#FFFFFF'>|</FONT>
          <A STYLE='color:#FFFFFF;text-decoration:none;'
                       HREF='/web/19981205060735/http://microsoft.com/isapi/goevents.asp?target=/' TARGET='_top'><FONT
            COLOR='#FFFFFF'>Events</FONT></A>  <FONT COLOR='#FFFFFF'>|</FONT>
          <A STYLE='color:#FFFFFF;text-decoration:none;'
                       HREF='/web/19981205060735/http://microsoft.com/isapi/gomscom.asp?target=/train_cert/'
                       TARGET='_top'><FONT COLOR='#FFFFFF'>Training</FONT></A>  <FONT COLOR='#FFFFFF'>|</FONT>
          <A STYLE='color:#FFFFFF;text-decoration:none;'
                       HREF='/web/19981205060735/http://microsoft.com/isapi/gomscom.asp?target=/msdownload/'
                       TARGET='_top'><FONT COLOR='#FFFFFF'>Downloads</FONT></A>  <FONT
            COLOR='#FFFFFF'>|</FONT>
          <A STYLE='color:#FFFFFF;text-decoration:none;'
                       HREF='/web/19981205060735/http://microsoft.com/isapi/goregwiz.asp?target=/regwiz/forms/pic.asp'
                       TARGET='_top'><FONT COLOR='#FFFFFF'>Newsletters</FONT></A>  <FONT
            COLOR='#FFFFFF'>|</FONT>
          <A STYLE='color:#FFFFFF;text-decoration:none;'
                       HREF='/web/19981205060735/http://microsoft.com/isapi/gomscom.asp?target=/worldwide/'
                       TARGET='_top'><FONT COLOR='#FFFFFF'>International</FONT></A>  <FONT
            COLOR='#FFFFFF'>|</FONT>
          <A STYLE='color:#FFFFFF;text-decoration:none;'
                       HREF='/web/19981205060735/http://microsoft.com/isapi/gomscom.asp?target=/backstage/'
                       TARGET='_top'><FONT COLOR='#FFFFFF'>About Our Site</FONT></A>  <FONT
            COLOR='#FFFFFF'>|</FONT>
    </B></FONT></TD>
<!-- End: Local menus -->

The Old Way

CSS Fun Facts

Internet Explorer 3

Internet Explorer 5 for Mac

5 Things CSS
Is Failing At

Selector Chains (No Nesting)

section {
  padding: 0 1em;
}

section p {
  font-size: 1em;
  color: black;
}

section p a {
  font-weight: bold;
  text-decoration: none;
}

section p a:hover {
  text-decoration: underline;
}

section {
  padding: 0 1em;

  p {
    font-size: 1em;
    color: black;

    a {
      font-weight: bold;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  }
}

Wouldn't it be great...

Extending Selectors

.message {
  padding: .5em;
  margin: 1em 0;
  background: lightgrey;
  border: solid 1px darkgrey;
  color: black;
}

.message-error { /* from above and overrides */ }

.message, .message-error { /* from above */ } 
.message-error { /* overrides */ }

.message.error { /* overrides */ } 
.message-error {
  @extend .message;
  border-color: red;
  border-width: 3px;
}

Wouldn't it be nice...

Variables

(Clunky at best)

 
 
:root {
  --main-bg-color: coral; 
}

#div1 {
  background-color: var(--main-bg-color); 
}

#div2 {
  background-color: var(--main-bg-color);
}

CSS3 Variables...

Calculations

(Well, kinda)

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px); // <-------- Here
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

CSS3 Calculations...

Functions/Mixins

Sass

What Sass Is...

  • A pre-compiler for your CSS (i.e. you end up with valid CSS)
    • Compile while developing and deployment (via CI)
  • A superset of CSS
  • Originally written in Ruby
  • Officially written in Dart and C (other implementations exist)
  • Allows for easily organizing code
  • Allows for rapid development of styles
  • Closely mimics common languages

What Sass is not

  • It doesn't require knowledge of any other language
  • It's not a client-side interpreter
  • It doesn't add client-side overhead
  • It's not a framework
    • But there are ones available (Susy, Neat, Foundation, Bootstrap, etc)

Alternatives

  • Stylus (Node.js)
  • Less (Node.js or Client side JS)
  • Myth (Node.js)
  • PostCSS (Node.js)
  • And others

Install

$ brew install sass/sass/sass
C:\>choco install sass

Binary Releases: https://github.com/sass/dart-sass/releases

Windows (Chocolatey)

Mac (Homebrew)

What's in the box?

SCSS & SASS Syntax

article {
  font-size: 16px;
  color: blue;
}
article
  font-size: 16px
  color: blue

SASS

(similar to ruby and python)

SCSS

(backward compatible with CSS. We'll use this today)

Variables

// Colors
$header-bg-color: #ffeeee;
$font-color: rgba(200,225,180,0.7);
$border-color: hsl(300, 75%, 50%);
// Units
$header-height: 30px;
$base-font-size: 2em;
// Strings and Lists
$cool-class: "way-cool";
$body-font-family: "Lato",Helvetica,Arial,sans-serif;
// Booleans
$is-this-thing-on: true;
// Maps
$header: (
  style: italic,
  weight: bold, 
);

Using Variables

heading.way-cool {
    background-color: #ffeeee;
    height: 30px;
    font: "Lato", Helvetica, Arial, sans-serif;
    font-style: italic;
}

Compiled CSS

heading.#{$cool-class} {
    background-color: $header-bg-color;
    height: $header-height;
    @if $is-this-thing-on {
        font: $body-font-family;
    }
    font-style: map-get($header, style);
}

SCSS

$header-bg-color: #ffeeee;
$header-height: 30px;
$cool-class: "way-cool";
$body-font-family: "Lato",...
$is-this-thing-on: true;
$header: (
  style: italic,
  weight: bold, 
);

Nesting

article {
    background-color: slateblue;
}

article h1 {
    font-family: sans-serif;
}

article a {
    color: yellow;
}

article a:hover {
    font-weight: bold;
}
article {
    background-color: slateblue;
    h1 {
        font-family: sans-serif;
    }
    a {
        color: yellow;
        &:hover {
            font-weight: bold;
        }
    }
}

Math Operators

// Unit Math (units must match)
$header-height: 80px + 20px;
$footer-height: ($header-height / 2); //Put division in parenthesis
// Color Math
$new-color: #bb33dd + #113311;
$another-color: #010203 * 2;
$dark-color: darken($another-color, 10);
// Math Functions
$rounded-number: round(1.5);
$floored-number: floor(1.9);

Standard Operators

Color Math

Math Functions

Extending selectors

.error {
    border: 1px #f00;
    background-color: #fdd;
}

.serious-error {
    @extend .error;
    border-width: 3px;
} 
.error, .serious-error {
    border: 1px #f00;
    background-color: #fdd;
}

.serious-error {
    border-width: 3px;
}

Compiled CSS

Give a selector the same styles as an earlier one

Mixins

@mixin link-color($base-color, $border-width: 1px) {
    color: $base-color;
    &:hover {
        color: darken($base-color, 20);
        border-bottom: $border-width solid complement($base-color);
    }
}

a {
    @include link-color(yellow);
}
a {
    color: yellow;
}

a:hover {
    color: #999900;
    border-bottom: 1px solid blue;
}

Compiled CSS

Mixins allow you to build a function that takes parameters

Plugins/Libraries

Let's do some live coding

Examples

Additional Resources

Questions?

Please fill out a survey

So Sassy - Flyover Camp

By akoebbe

Made with Slides.com

So Sassy - Flyover Camp

  • 1,617

More from akoebbe