Getting to Know

Maxwell Morgan

@maxinacube

Lead Front-End Developer

Jeff Golenski

@jeffgolenski

Design + Front-End Developer

NEIT Wifi

UN: cmguest
PW: welcoMe!

What is Sass?

"CSS Super Language"

- Hampton Catlin

Sass is a CSS preprocessor.

Sass is an open-source project, like WordPress.

Sass is your best friend.

If it's not, it should be.

Why use Sass?

Promotes DRY coding.

Don't Repeat Yourself.

Sass is dynamic!

$variables

$pink:      #c6538c;
$blue:      #036;

$primary:   $pink;
$secondary: $blue;

h1, h2, a {
    color: $primary;
}

a:hover {
    color: $secondary;
}

.button {
    background: $secondary;
}

h1, h2, a {
    color: #c6538c;
}

a:hover {
    color: #036;
}

.button {
    background: #036;
}

@functions

$pink:      #c6538c;
$blue:      #036;

$primary:   $pink;
$secondary: $blue;

h1, h2, a {
    color: $primary;
}

a:hover {
    color: $secondary;
}

.button {
    background: $secondary;
    color: legible( $secondary );
}

h1, h2, a {
    color: #c6538c;
}

a:hover {
    color: #036;
}

.button {
    background: #036;
    color: #eee;
}

@function legible ( $color ) {
    @if ( lightness( $color ) < 50% ) {
        @return #eee;
    } @else {
        @return #111;
    }
}

@mixins

$pink:      #c6538c;
$primary:   $pink;

@mixin button ( $background: $primary, $color: white ) {
    background-color: $background;
    border: 1px solid darken( $background, 15% );
    color: $color;
    display: inline-block;
    padding: 8px 10px;
    text-decoration: none;
}

.button {
	@include button;
}

.button {
    background-color: #c6538c;
    border: 1px solid #9a3366;
    color: white;
    display: inline-block;
    padding: 8px 10px;
    text-decoration: none;
}

Most important,
how to use Sass.

Structure code by nesting.

Leverage file hierarchy
& Sass partials.

Take advantage of the
built-in magic.

$magic: (
    'variables',
    'operations',
    'functions',
    'directives',
    'output',
);

What to use when compiling.

Don't be afraid of terminal.

CodeKit is a paid Mac app that will compile your Sass without terminal.

CodeKit can also compile JS and live-refresh changes in your browser.

incident57.com/codekit

Compass is a light-weight compiler, and hands down the easiest to use when starting a new project.

Once installed, simply run compass init in terminal to start a new Compass project.

compass-style.org

Grunt is the most powerful, and also the most complicated of the compilers.

Grunt allows you to set-up many tasks other than Sass. Use Grunt to minify images, create icon fonts, and sniff your code for errors. There's almost no limit with Grunt.

gruntjs.com

Jetpack is one of the most powerful plugins offered in WordPress, and you can start using Sass with any theme as quick as you can install Jetpack.

Simply activate the Custom CSS feature and you'll find a CSS Editor under your appearance menu.

Best of all, it's free and has a full support team.

jetpack.me/support/custom-css

CodePen gives you preprocessors for CSS, Javascript and HTML, and also generates a live preview.

CodePen is my favorite tool to utilize when I need to build out a concept, it is great for rapid iterations and testing out new methods.

codepen.io

Best practices.

Nesting, no more than 3 levels deep.

If you find yourself doing this, take a step back and reevaluate your code.

Keep mixins simple.

Use placeholders, but not too much.

If you know it's not correct, _shame it.

https://github.com/laras126/simple-sassy-starter/blob/master/scss/_shame.scss

Resources

#teamSass

Find articles, blogs, tutorials, books, frameworks, and even how YOU can contribute to Sass!

sass-lang.com/community

CSS-Tricks

CSS-Tricks is far more than just CSS, but is a great place to learn some cool tricks of the trade for any aspect of front-end.

css-tricks.com/snippets/sass/

The Sass Way

Like Sass itself, the Sass Way is fully driven by contributors and covers the latest news and topics of Sass.

thesassway.com

Workshop Part 1:

Make it Sass

Take plain ol' CSS and convert it to Sass.

Go to codepen.io and sign-up for a free account

Fork my pen, WCRI Part 1

codepen.io/maxinacube

Let's start Sassing!

Workshop Part 2:

Sass from scratch.

Fork my pen, WCRI Part 2

codepen.io/maxinacube

Make another fork, and remove all my styles!

Start from scratch and have fun! Use my pen for reference, or go your own way.