Sass Logo

Keeping your HTML Semantic

with Ray Villalobos

Use arrow keys to continue, esc for menu
Break its legs

I love frameworks

  • Easy to get going
  • Simple responsive design
  • Better than Browser stylesheets
  • Awesome built in components
  • Well tested
Sun Love

Problems

  • Heavy size
  • Sites look the same
  • Code like this
    
    <div class="media-img
    pull-left
    col-sm-5 col-md-4
    visible-lg-*
    visible-print-inline-block">
    
  • Hard to maintain
Guilty Dog

I feel guilty

  • Don't want to do prefixes
  • width: 48.958333% (really?)
  • Don't want to wait 20 years 'til ie dies

What I'll be showing you

  • Workflow for responsive sites
  • Toolset for building
  • No dirty classes
  • Think Layout not Math
  • This site

Why do I need a workflow tool?

  • Compress, Concatenate, Minify
  • Less HTTP requests
  • Automates everything
  • Handles all pre-processors
  • Live Reloading
  • Development vs Production Builds
Stephen Colbert

What are some of the tools

Why you need preprocesing

  • 46% never tried
  • 54% tried
  • 83% like it
  • 4% didn’t like it
  • 13% meh!

sample size: 13,712. CSS-Tricks

Addiction rates

Preprocessors vs other hard to kick habits

Other Barbituants

Less vs Sass?

  • Almost Identical
  • Sass Requires Ruby
  • Learn both
  • I like Sass
Sass Logo

Why do people love it?

Let me love you
Sass Logo

Variables & Utilities

$main_color : #BADA55;

.navbar {
  background: $main_color;
}

h1,h2,h3 {
  background:  darken($main_color, 20);
}

CSS

without Nesting

.pixgrid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pixgrid ul li {
  float: left;
  width: 96px;
  height: 96px;
  padding: 0 5px 5px 0;
}
.pixgrid ul img {
  max-width: 96px;
  cursor: pointer;
}
Sass Logo

Nesting


.pixgrid  {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      float: left;
      width: 96px;
      height: 96px;
      padding: 0 5px 5px 0;
    }
    img {
      max-width: 96px;
      cursor: pointer;
    } //img
  }
}
Sass Logo

Operators


$border_thickness : 1px;
$thicker : $border_thickness*5;

.sidebar {
  border: $thicker solid black;
}
.sidebar {
  border: 5px solid black; }
Sass Logo

Controls


$border_thickness : 1px;
$thicker : $border_thickness*5;

.sidebar {
  @if ($border_thickness<=1) {
    background-color: red;
  } @else {
    background-color: yellow;
  }
}
Sass Logo

Mixins

@mixin rounded( $radius: 10px) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;
}

ul {
  padding: 0;
  margin: 0;
  list-style:none;

    li img {
    display: block;
    @include rounded(20px);
  }
}
Sass Logo

Modularity


//Core partials
@import "variables";
@import "mixins";
@import "base";
@import "layout";

// Import Modules

@import "modules/intro";
@import "modules/nav";
@import "modules/welcome";
Sass Logo

What is compass good for?

  • A set of mixins for Sass
  • CSS3 shadows
  • gradients
  • transitions
  • flexbox
Sass Logo

Utility Features

  • 
    #{headings()} {
      font: $headFont;
      color: $headColor;
      font-weight: $bold;
    }
    
Sass Logo

Easier CSS3

  • 
    #sales {
      @include text-shadow($dark 0 0 20px);
      @mixin rounded( $radius: 10px);
    }
    
Sass Logo

Simple Flexbox

  • 
      .fullheight {
        @include display-flex();
        @include align-items(center);
        @include justify-content(center);
      }
    
Sass Logo

Use Susy for Responsive Grids

  • Takes care of the math
  • Because one grid is not enough
  • Makes layout fun
Sass Logo

Use Susy for Responsive Grids

  • 
    $susy: (
      columns: 12,
      container: 60em,
      gutters: 1/4,
      gutter-position: inside
    );
    
  • Start by setting defaults
  • Tons of options
Sass Logo

Use Susy for Responsive Grids

  • Layout elements on the grid
  • 
        .brand {
          @include span(4);
        } //brand
    
        ul {
          @include span(8 at 4 of 12);
        }
    
Sass Logo

Use Susy for Responsive Grids

  • Override anything afterwards
  • 
      article {
        @include container(95%);
      } //article
    
Sass Logo

Use Susy for Responsive Grids

Sass Logo

Use Susy for Responsive Grids

  • Easily create galleries
  • 
    .gallery {
      @include gallery(1 of 4); 
    }
    
  • Susy handles the layout

What about Media Queries

  • Can get complicated
  • Breakpoint makes it easier
  • Define some default breakpoint sizes
    
    $narrow: 400px;
    $small: 650px;
    $medium: 960px;
    $wide: 1200px;

Use variables in layouts

  • 
    .room {
      @include display-flex();
      @include align-items(center);
      @include justify-content(center);
      @include container(100%);
      @include pad(1, 1);
    
      @include breakpoint($small) {
        @include pad(7, 1);
      }
    

OMG I Want it!!!