Fixing CSS 

with Sass

Syntactically Awesome Stylesheets

The Problem:

The CSS language is terrible.

  • Not hierarchical
  • Not modular
  • Not expressive
  • Repetitive

Useful Software Principles

Data Abstraction

  • Use meaningful symbols instead of "magic numbers" (Variables and data structures)

Encapsulation/Modularity

  • Combine common elements into useful and meaningful entities (Functions & objects)

Expressivity

  • Allow organization, naming, and statements that makes the code easier to read, extend and maintain.

How many of these are missing from CSS?

Sass to the rescue

  • Efficient (it does more with less code) 
  • Expressive (it is better at describing what is going on)
  • Hierarchical (Nesting makes it easier to track HTML)
  • Modular (it isolates stuff into components and allows re-use)
  • DRY (you don't need to repeat yourself)

SCSS

  • A version of Sass
  • Syntax is a superset of CSS
  • All your CSS works without change
  • Can add new Sass features as needed

Documentation

http://sass-lang.com

Playground

 

  • Sassmeister.com http://sassmeister.com/
  • Connects to github for gists

 

Set up an account now and play along!!

For each of the following slides,

  1. Enter the example SCSS
  2. Check the generated CSS
  3. Create some HTML 
  4. Try something else
  5. Share with the class

Variables

  • Store things
  • Allow reuse many places.
  • Make things more understandable
  • Naming is very important
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

  • Selectors inside selectors
  • Can structure your stylesheets to mirror HTML.
  • Aids understanding.
  • When you are writing nested rules, use the parent selector (&) to refer back up the hierarchy
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    &:hover {
        color: blue;
    }
  }
}

Partials and modularity

  • Sass files with little snippets of code focused on one thing and very modular.
  • A partial file name starts with a leading underscore.
  • Partials are not converted to CSS by themselves

  • Imported into another Sass file using the @import directive.

// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

 

// base.scss
@import 'reset';


$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

Mixins

  • The @mixin directive lets you make groups of CSS declarations and reuse them many places.
  • Save time, improve quality and, with good naming, aids understanding.
  • They kind of look like JavaScript functions -- they can take parameters, too. But they don't return values.
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Extends

  • @extend shares CSS properties from one selector to another.
     
  • Implements inheritance, where one selector takes on the properties of another selector and, well, extends it.
     
  • Can naturally implement a design that has visual consistency and cohesiveness (visual elements have common characteristics, so their classes have common code)
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

SassScript

  • Adds operators, parentheses, functions, and other language features in CSS directives
     
  • Similar to JavaScript.
     
  • Operators let you do simple math 
     
  • Functions provide lots of useful little behaviors that make working with colors, opacity, strings, numbers, lists, and other more esoteric things fun and easy.
.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

@import

  • The  @import directive lets you modularize your code.
  • Better than the CSS @import directive which happens as the page loads (causing additional HTTP requests and delays).
  • Happens in the development environment as part of the tool chain
  • The @import directive just takes the name without the underscore and no extension
  • @import reset
    finds 
    _reset.scss

Managing Sass Files

  • Source control .scss files, not .css files
  • Change any .css files to .scss then add .css to your .gitignore
  • Use a preprocessor that automatically watches .scss files and runs when they change
  • Ruby Sass preprocessor is most authoritative
  • JavaScript versions (which use lib-sass) are great for our tool chain
  • See module on Task Automation

Assignment

Watch:


Read:

Made with Slides.com