Refactoring CSS with SASS

Tom Williams |

SASS is a CSS preprocessor that extends CSS.
A layer that sits between SASS and CSS
SASS compiles/translates SASS to CSS

Install

    Last login: Mon May 23 14:51:24 on ttys000
    Thomass-MacBook-Air:~ thomaswilliams$ sass -v
    -bash: sass: command not found
    Thomass-MacBook-Air:~ thomaswilliams$ gem install sass
    ERROR:  While executing gem ... (Gem::FilePermissionError)
        You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
    Thomass-MacBook-Air:~ thomaswilliams$ sudo gem install sass
    Password:
    Fetching: sass-3.4.22.gem (100%)
    Successfully installed sass-3.4.22
    Parsing documentation for sass-3.4.22
    Installing ri documentation for sass-3.4.22
    1 gem installed
    Thomass-MacBook-Air:~ thomaswilliams$ sass -v
    Sass 3.4.22 (Selective Steve)
    Thomass-MacBook-Air:~ thomaswilliams$

Update

        Thomass-MacBook-Air:~ thomaswilliams$ gem update sass
        Updating installed gems
        Nothing to update
        Thomass-MacBook-Air:~ thomaswilliams$

Watch Directory

    Thomass-MacBook-Air:~ thomaswilliams$ cd desktop/project
    Thomass-MacBook-Air:project thomaswilliams$ sass --watch scss:css
    >>> Sass is watching for changes. Press Ctrl-C to stop.
    [Listen warning]:
      Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.

To note:

  • cd desktop/foldername change directory
  • sass --watch scss:css to watch
  • ctrl-c to stop watching

REFACTORING

  1. Sections—Partials : Break related sections out into partials
  2. Patterns—Extends : Extract patterns into extends
  3. Nest Rules : Nest rules where it makes sense
  4. Values—variables : Variables for repetitive values
  5. Mixins : Convert repeating declaration groups into mixins

PIPING PARTIALS

Order that partials are piped effects cascade.
use sass @import to arrange partials

// Global Imports
//----------------------------------------------------------

@import 'base/index';
@import 'layout/index';
@import 'components/index';

PLACEHOLDERS SELECTORS/EXTENDS

Extends are a smart solution for sharing styles.

To access Helper | Utility | Placeholder tool

Great for refactoring with SASS but must be careful to avoid bloat. Eliminate needless specificity and long selector chains. Don't always nest styles in SASS as lots of nesting equals bloat. The main benefit is originally writing CSS without parent dependencies.

One benefit of nesting: 

/* Pseudo-classes ------------------ */

        a {
          &:link {
            color: rgb(255, 169, 73);
            text-decoration: none;
          }

          &:visited {
            color: lightblue;
          }

          &:hover {
            color: rgba(255, 169, 73, .4);
          }
        }

Related selectors nicely organised under 1 rule where possible using parent selector to append suffix to a selector.

This is especially useful when working with name spaced class selectors for instance:

.main-heading {}
.main-title {}

Becomes

.main {
  &-heading {}
  &-title {}
}

VARIABLES

// Descriptive color variables

$white             : #fff;
$black             : #000;
$grey              : #878787;
$regent-st-blue    : #add8e6;
$river-bed         : #48525c;
$yellow-orange     : #ffa949;

// Functional color variables

$color-border-light : lighten($grey, 35%);
$color-border-dark  : $yellow-orange;

$color-link-default : $yellow-orange;
$color-link-visited : $regent-st-blue;

$color-shadow       : rgba($black,.8);
$color-body         : $white;

// Font stacks

$stack-sans-serif  : Helvetica, Arial, sans-serif;
$stack-helvetica   : "Helvetica Neue", $stack-sans-serif;
$stack-abolition   : 'Abolition Regular', $stack-helvetica;

//Border Radius

$br                : 10px;

//Asset paths

$path-img          : '../img';
// use #{$path-img} to pass

We can speed up using 'find change' to swap out all colour variables.

MIXINS

instead of re-writing common code we can write once in a mixin and let sass generate them dynamically.

Great thing is we can reuse in other projects.

Write mixins that make use of arguments to dynamically alter css values. Instead of ones that just repeat blocks of code, which could cause extra and unecessary bloat in output.

// Web fonts

@mixin font-face($family, $file) {
    @font-face {
      font-family: $family;
      src: url('#{$path-font}/#{$file}-webfont.eot');
      src: url('#{$path-font}/#{$file}-webfont.eot?#iefix') format('embedded-opentype'),
           url('#{$path-font}/#{$file}-webfont.woff') format('woff'),
           url('#{$path-font}/#{$file}-webfont.ttf') format('truetype');
    }
}

// Text

@mixin text($size: null, $l-height: null, $weight: null, £color: null) {
    font-size: $size;
    line-height: $l-height;
    font-weight: $weight;
    color: $color;
}

always include mixins first when declaring within other partials to ensure correct cascade through styles.

MEDIA QUERIES

define media queries by nesting inside rules keeping local to their component.

preferable to distribute to respective rules.

eg. Building powerful conditional media query mixins.

  • VARIABLES
  • MIXINS
  • EXTENDS
  • FUNCTIONS
  • INTERPOLATION
Show Comments