Intro to

CSS Preprocessors

http://slides.com/zachfedor/css-preprocessors/live

Overview

Background
Choices
Functionality
Next Steps

What is CSS?

A style sheet language used for describing the look and formatting of a document written in a markup language.

If it ain't broke, don't fix it.

Out of it's element
Disorganized
Repetitive
Hard to Maintain

CSS is work

What is a Preprocessor?

?

Common Preprocessors

Sass
Less
Stylus
CSS Crush
Rework

Common Misconceptions

"I heard you have to use the command line."
"Who needs any more dependencies?"
"I'm an optimization junkie. This sounds slow."
"You mean I have to work locally?"
"It's just one more thing I have to learn."

Time for the good stuff!

Common Features

Nesting
Variables
Operations
Functions
Mixins

.sass

.scss

nav {
    margin: 1em 0;
    width: 100%;
    background: #444444;

    a {
        color: #44a0dd;
        text-decoration: none;
    }
}

nav
    margin: 1em 0
    width: 100%
    background: #444444

    a
        color: #44a0dd
        text-decoration: none

Formatting

sassmeister.com

.scss

.css

nav {
    margin: 1em 0;
    width: 100%;
    background: #444444;
}

nav a {
    color: #44a0dd;
    text-decoration: none;
}

Nesting

nav {
    margin: 1em 0;
    width: 100%;
    background: #444444;

    a {
        color: #44a0dd;
        text-decoration: none;
    }
}

.scss

.css

a {
    color: #44a0dd;
    text-decoration: none;
}

a:hover {
    color: #444444;
    text-decoration: underline;

}

h1 {
    border-style: solid;
    border-color: #444444;
    border-width: 2px;
    border-bottom-width: 4px;
}

a {
    color: #44a0dd;
    text-decoration: none;
    &:hover {
        color: #444444;
        text-decoration: underline;
    }
}
h1 {
    border: {
        style: solid;
        color: #444444;
        width: 2px;
        bottom: {
            width: 4px;
        }
    }
}

Advanced Nesting

.scss

.css

p {
    color: #444444;
    margin: 10px 2em;
}

p a {
    color: #44a0dd;
}

$text: #444444;
$accent: #44a0dd;
$spacing: 2em;

p {
    color: $text;
    margin: 10px $spacing;

    a {
        color: $accent;
    }
}

Variables

.scss

.css

.logo {
    background: url("/wp-content/themes/theme/assets/images/logo.png");
}

$images: "/wp-content/themes/theme/assets/images/";

.logo {
    background: url($images + "logo.png");
}

Variable Interpolation

.scss

.css

main {
    margin: 0 5%;
}

article.full-content {
    width: 90%
}

article.content-sidebar {
    width: 70%;
}

article.sidebar-content-sidebar {
    width: 50%;
}

$width: 90%;
$sidebar: 20%;

main {
    margin: 0 (100% - $width)/2;
}

article.full-content {
    width: $width;
}

article.content-sidebar {
    width: $width - $sidebar;
}

article.sidebar-content-sidebar {
    width: $width - ($sidebar * 2);
}

Operations

.scss

.css

p {
    font-size: 11px;
}

p.error {
    color: #ff2b00;
}

p.error-block {
    background: #ff7f66;
    color: white;
}

$red: hsl(10, 100%, 50%);
$light-red: lighten($red, 20%);
$font: 10.6px;

p {
    font-size: round($font);

    &.error {
        color: $red;
    }

    &.error-block {
        background: $light-red;
        color: white;
    }
}

Functions

.scss

.css

#site-title {
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    color: #444444;
    padding: 5% 0;
    text-align: center;
}

@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }

    color: #444444;
}

#site-title {
    @include large-text;
    padding: 5% 0;
    text-align: center;
}

Mixins

Advanced Features...

Custom Functions
Variable Maps
Partials
Control Directives

Time to Get Started!

RTFM!
Codekit, Koala, Scout, etc.
Command Line :)
Start Building

Helpful Resources

@zachfedor

THE END

slides.com/zachfedor/css-preprocessors/

Made with Slides.com