Sass-tronomical CSS

Who is this guy?

  • David Khourshid
  • Front-end Web Developer at Viewpost
  • Sass Aficionado, a.k.a. "Sass-hole"
  • Awesome

"What is Sass?"

"I just came here for the free food"

"Also, what's with the goats?"

Sass generates awesome CSS.

...whatever "awesome CSS" means.

Sass is a preprocessor.

Sass/SCSS is processed into vanilla CSS.

Preprocessor

Postprocessor

Food Processor

Also, it's spelled...

S

A

S

S

yntactically

 wesome

tylesheets

 

(  tupid)

Installing Sass

It's sort of easy.

Installing Sass on Mac

gem install sass
sudo gem install sass
alias yolo='sudo $(history -p \!\!)'

gem install sass
    You don't have write permissions 
    for the /Library/Ruby/Gems/2.0.0 directory.

yolo
    Successfully installed sass-3.4.12
    Parsing documentation for sass-3.4.12
    1 gem installed
sass input.scss output.css

sass --watch input.scss output.css

Installing Sass on Windows

Because IT hates you.

Get Ruby for Windows:

http://rubyinstaller.org/

// Shamelessly copied from
// https://www.npmjs.com/package/gulp-sass
var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

Or use libsass, npm, and gulp if IT really hates you:

Sass Compatibility

Sass Variables

  • No more magic numbers (you're better than that)
  • Lexically scoped
  • Override with !global
  • Allow custom values with !default
// Lexical scope
$girl-basic-color: white !default;

.girl:not(:nth-child(even)) {
    color: $girl-basic-color;
}

// Strings
.country-music-concert {
    $wrapping: nowrap;

    white-space: $wrapping;
}

// Maps
$colors: (
    smurf: blue,
    pacman: yellow,
    chucknorris: #BADA55
);

// Lists
$animations: (barrel-roll, roundhouse-kick);

.karate-starfox {
    animation-name: $animations;
}


  • Strings
  • Colors
  • Numbers (+ units)
  • Lists
  • Maps
  • Bools

Control Directives

  • @if ... @else
  • @for ... from ... through
  • @each item in items
  • @while ...
  • if(predicate, if-true, if-false)

// @if ... @else block
$girlfriend-right: 100%;

.girlfriend {
    @if $girlfriend-right > 90% {
        right: $girlfriend-right;
        margin: 0%;
    } @else {
        visibility: hidden;
    }
}

// @each for lists
$goats: ('alpine', 'black', 'angora', 'mountain');

@each $goat in $goats {
    .goat-#{$goat} {
        // ...
    }
}

// @each for maps
$fractions: (
    'half': 1/2,
    'third': 1/3,
    'quarter': 1/4
);

@each $name, $value in $fractions {
    .column-#{$name} {
        width: $value;
        // Wow, something actually useful
    }
}

Variable Interpolation

  • #{  expression  }
  • Expression can be:
    • Single variable
    • Expression
    • Explicit value
// Interpolation in selectors

$oprah-color: purple;

.the-color-#{$oprah-color} {
    color: $oprah-color;
}


// Interpolation in rule values

$box-sizing-preference: border;

* {
    box-sizing: #{$box-sizing-preference}-box;
}

// Interpolation in property keys

$chacha-spacing: padding;

.chacha-slide + .to-the-left {
    #{$chacha-spacing}-left: 10rem;
}

Nested Selectors

  • Useful, but don't use frequently.
  • Combines parent and child selectors

.ancestor {
    .descendant {
        // ...
    }
}

// .ancestor .descendant { ... }

.mother {
    > .child {
        // ...
    }
}

// .mother > .child

.mother {
    &-trucker {
        // ...
    }
}

// .mother-trucker { ... }

.son {
    .father > & {
        // ... 
    }
}

// .father > .son { ... }

& - references Parent Selector

No idea what it's really called.

  • & acts like a variable containing the parent selector
  • Use wherever the parent selector should be placed
  • Useful for inverse or complex relationships
// SCSS
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

// CSS
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

"Parent selector reference interpolatable pseudo-variable thing?"

@mixin directive

  • Name of mixin
  • Arguments (optional)
    • Can be named
  • @content (optional)
  • @include name() { ... }
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue); }

h1 { @include sexy-border(blue, 2in); }

// Mixins with @content
@mixin hug-me() {
    .hug {
        @content;
    }
}

@include hug-me {
    .needs-a-hug {
        // ... 
    }
}

Defines styles that can be

reused and even customized

wherever you @include them

@extend directive



%crazy-transition {
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 1.7s;
    transform: translateX(-19939px);
}

a:hover {
    @extend %crazy-transition;
}

button:hover {
    @extend %crazy-transition;
}

The documentation sucks for @extend.

Allows sharing of relationships and rules between selectors.

Use primarily with

%placeholder selectors, which are not output in the compiled CSS.

@import

directive

@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

@import 'utils/variables';
@import 'utils/functions';
@import 'utils/mixins';
@import 'utils/placeholders';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/carousel';
@import 'components/cover';
@import 'components/dropdown';

@import 'pages/home';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';
  • Sass/SCSS files are imported pre-output
  • All other files use native CSS @import
  • .sass and .scss not needed
  • Use _underscore.scss for partials
  • Partials don't generate their own file (this is good)
  • Please observe your country's embargo laws

Architect your projects!

http://sass-guidelin.es/#architecture

The 7-1 Pattern

7 folders, 1 file. I know; real creative.

  • base/
  • components/
  • layout/
  • pages/
  • themes/
  • utils/
  • vendors/
  • main.scss

Start writing Sass-tromonical CSS today!