Intro to

CSS Preprocessors 

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

Overview

  1. Background
  2. Choices
  3. Functionality
  4. 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/

Intro to CSS Preprocessors

By zach fedor

Made with Slides.com

Intro to CSS Preprocessors

What are they and why should you care?

  • 2,337

More from zach fedor