About Me

Brandon Martinez | brandonmartinez.com | @brandonmartinez

Skyline Technologies (We're Hiring!) | skylinetechnologies.com | @skylinetweets

Let's Get Started!

CSS Preprocessors

What are they?

Utilities that preprocess languages into CSS

Allow for modular, DRY, development of CSS

Provide a superset of features, such as variables, mixins, imports, and more

Sass, Less.js, and Stylus are the most popular

We'll be focusing on Sass

What's Bootstrap?

An HTML, CSS, and JS framework for rapid web development

Developed originally with Less.js, but now additionally has a Sass port

Includes lots of design patterns, widgets, interactive features, and more that you would expect out of a framework

Why Not Bootstrap?

Still have to work to customize it

Lots of extra markup
(non-domain semantic classes used to style; e.g. col-sm-4)

May get more features than needed

Getting SASSy

Sass is a Ruby-based CSS preprocessor. It is one of the most mature, and popular, preprocessors available. Getting started is easy.


// SCSS

$base-text-color: #000;
$base-text-hover-color: #444;

#header {
  h1 {
    color: $base-text-color;

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
        color: $base-text-hover-color;
      }
    }
  }
}


/* CSS */

#header h1 {
  color: #000;
}

#header h1 a {
  text-decoration: none;
}

#header h1 a:hover {
  text-decoration: underline;
  color: #444;
}

/* Compressed! */
#header h1{color:#000}#header h1 a{text-decoration:none}#header h1 a:hover{text-decoration:underline;color:#444}