getting sassy with css

86
Getting Sassy with CSS Julie Cameron @jewlofthelotus CodeMash 2015 bit.ly/getting-sassy

Upload: julie-cameron

Post on 27-Jan-2015

137 views

Category:

Technology


1 download

DESCRIPTION

I don't know about you, but vanilla CSS always leaves me wanting more. It's a fairly simple language, can do some pretty powerful things, but after a while.. well, it can become rather tedious to work with. Enter Sass: Syntactically Awesome Stylesheets. Sass is a CSS meta-language and precompiler that makes the prettification of your website a breeze by adding invaluable features of more traditional programming languages. In this session, we'll jump right in to the Sass workflow and cover all the key game changers - nesting, variables, mixins, inheritance, and directives. We'll also cover some of the gotchyas, tools and extensions, and tips for organization and coding standards. Prepared for the self.conference at COBO Hall in Detroit, Michigan on May 30, 2014

TRANSCRIPT

Page 1: Getting Sassy with CSS

Getting Sassy with CSS

Julie Cameron @jewlofthelotus

CodeMash 2015 bit.ly/getting-sassy

Page 2: Getting Sassy with CSS

DERP.

Page 3: Getting Sassy with CSS

I <3 PAIR PROGRAMMING

Page 4: Getting Sassy with CSS
Page 5: Getting Sassy with CSS
Page 6: Getting Sassy with CSS

Syntactically Awesome Stylesheets

Page 7: Getting Sassy with CSS

NOT an acronym…

Syntactically Awesome Stylesheets

Page 8: Getting Sassy with CSS

“If you see something, say something. Only you can prevent overcapitalization.”

Hampton Catlin, Creator Of Sass

This is a public service announcement…

Page 9: Getting Sassy with CSS

Just don’t be a

#Sasshole about it. :)

Page 10: Getting Sassy with CSS

What Is Sass?

Page 11: Getting Sassy with CSS

What Is Sass?

1. An extension of CSS SassScript Language. Fully CSS-compatible syntax.

Page 12: Getting Sassy with CSS

What Is Sass?

1. An extension of CSS SassScript Language. Fully CSS-compatible syntax.

2. A CSS preprocessor SassScript MAGIC CSS

Page 13: Getting Sassy with CSS

Where Did Sass Come From?

• 2007: Designed by Hampton Catlin (Haml)

• Developed by Chris Eppstein (Compass) and Natalie Weizenbaum

Page 14: Getting Sassy with CSS

Why Did They Make Sass?

Page 15: Getting Sassy with CSS

Why Did They Make Sass?

Because vanilla CSS just wasn’t cutting it any more.

Page 17: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

Page 18: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Nesting

Page 19: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Nesting

• Imports

Page 20: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Nesting

• Imports

• Variables

Page 21: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Nesting

• Imports

• Variables

• Mixins

Page 22: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Nesting

• Imports

• Variables

• Mixins

• Inheritance

Page 23: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Nesting

• Imports

• Variables

• Mixins

• Inheritance

• Functions

Page 24: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Nesting

• Imports

• Variables

• Mixins

• Inheritance

• Functions

• Loops

Page 25: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Nesting

• Imports

• Variables

• Mixins

• Inheritance

• Functions

• Loops

• AWESOME

Page 26: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

Page 27: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Reduced Repetition

Page 28: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Reduced Repetition

• Cleaner Modularity

Page 29: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Reduced Repetition

• Cleaner Modularity

• Maintainability

Page 30: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Reduced Repetition

• Cleaner Modularity

• Maintainability

• Scalability

Page 31: Getting Sassy with CSS

What Does Sass Give Us That CSS Doesn’t?

• Reduced Repetition

• Cleaner Modularity

• Maintainability

• Scalability

• REAL PROGRAMMING!

Page 32: Getting Sassy with CSS

Setup & Workflow

Page 33: Getting Sassy with CSS

Sass Installation

Ruby OS X? Lucky you, it’s preinstalled!

Windows? Try RubyInstaller.

Sass $ gem install sass

Page 34: Getting Sassy with CSS

Compiling Sass

Sass CSS

$ sass source.sass output.css

$ sass source_dir output_dir

Page 35: Getting Sassy with CSS

Compiling Sass

Sass CSS

$ sass source.sass output.css

$ sass source_dir output_dir

MAGIC

Page 36: Getting Sassy with CSS

Sass Is Watching You

$ sass —-watch source.sass:output.css

This is the best thing. Ever.

Gotchya: Colon vs. Space

Page 37: Getting Sassy with CSS

Two Sass SyntaxesSassy CSS .scss

Default; Valid CSS == Valid SCSS

Indented .sass Original syntax; Haml-esque

Page 38: Getting Sassy with CSS

The Good StuffOr, Why You’ll Never Write Plain Old CSS Again.

Page 40: Getting Sassy with CSS

NestingHTML has a clear hierarchy - elements are nested.

We can apply the same concept in Sass.

HTML Sass

Page 41: Getting Sassy with CSS

Nesting Output

MAGIC

Sass CSS

Page 42: Getting Sassy with CSS

Nesting Gotchya

Mirroring HTML nesting is SUPER easy.

MA

GIC

?

Sass

CSS

Page 43: Getting Sassy with CSS

Nesting Gotchya

Mirroring HTML nesting is SUPER easy.

MA

GIC

?

Overly verbose and overly specific.

Sass

CSS

Page 44: Getting Sassy with CSS

Nesting Gotchya

Mirroring HTML nesting is SUPER easy.

MA

GIC

?

Overly verbose and overly specific.

Rule of thumb: No more than 3 levels deep

Sass

CSS

Page 45: Getting Sassy with CSS

Nesting The Parent Selector

You can reference parent selector(s) with an &

MAGIC

Sass CSS

Page 46: Getting Sassy with CSS

Nesting The Parent Selector

The & can follow other selectors, too!

MAGIC

Sass

CSS

Page 47: Getting Sassy with CSS

Sass

Nesting The Parent Selector

As of Sass 3.3, you can also append a suffix to the &!

MA

GIC

CSS

Page 48: Getting Sassy with CSS

Nesting Media Queries

MAGIC

THIS IS FREAKING AWESOME.

Sass CSS

Note: Like media queries will not group together in the output.

Page 50: Getting Sassy with CSS

Imports

CSS @import has always meant an extra file download.

Sass modifies @import to instead include the resource during compilation, rather than on the client side.

Sass (application.scss)

Page 51: Getting Sassy with CSS

Imports File Structure• project_awesome

• sass

• lib

• compass.scss

• fontawesome.scss

• base.scss

• grid.scss

• application.scss

• css

• application.css

$ sass sass/application.scss css/application.css

Sass

Page 52: Getting Sassy with CSS

Imports File Structure

• project_awesome

• sass

• lib

• compass.scss

• fontawesome.scss

• base.scss

• grid.scss

• application.scss

$ sass sass/ css/

• project_awesome

• css

• lib

• compass.css

• fontawesome.css

• base.css

• grid.css

• application.css

MAGIC

Page 53: Getting Sassy with CSS

MAGIC

Import Partials

• project_awesome

• sass

• lib

• _compass.scss

• _fontawesome.scss

• _base.scss

• _grid.scss

• application.scss

• print.css

$ sass sass/ css/

• project_awesome

• sass

• …

• css

• application.css

• print.css

Page 55: Getting Sassy with CSS

Variables

WTF is #531946?

#30162b? #095179?

WAT?

Page 56: Getting Sassy with CSS

Variables

Variables let you reuse single values.

Sass

Page 57: Getting Sassy with CSS

Variable Usescolors

font sizes

font families

font paths

padding

margins

breakpoints

border-radius

pseudo content

shadows

gradients

SELECTORS!

LOGIC!

ALL THE THINGS!!!1!

Page 58: Getting Sassy with CSS

Variable Data TypesNumbers

Strings

Colors

Lists

Booleans

Null

Maps

Sass

Page 59: Getting Sassy with CSS

Variable Dynamics

• Mutable.

• Can have default values.

• Can be interpolated.

• Have scopes.

Sass

Page 61: Getting Sassy with CSS

Math

• + addition

• - subtraction

• * multiplication

• / division

• % modulus

Sass lets us use basic math operations.

Sass

CodeMash

Page 62: Getting Sassy with CSS

Math Functions

• abs($num) - absolute value

• ceil($num) - round up to closest whole number

• floor($num) - round down to closest whole number

• percentage($num) - convert to percentage

• round($num) - round to closest whole number

• max($list) - maximum list value

• min($list) - minimum list value

Sass comes with a set of math functions.

Page 63: Getting Sassy with CSS

Color MathWe can even use math to manipulate colors.

Sass

Page 64: Getting Sassy with CSS

Color Functions

• rgba($hex, $alpha)

• lighten($color, $percent)

• darken($color, $percent)

• saturate($color, $percent)

• desaturate($color, $percent)

• mix($color1, $color2)

• grayscale($color)

• invert($color)

• complement($color)

• AND MANY MORE!

Sass comes with AWESOME color functions.

http://sassme.arc90.com

Page 66: Getting Sassy with CSS

Mixins

Variables let you reuse single values

Mixins let you reuse blocks of styles

Page 67: Getting Sassy with CSS

Mixins Use

CSS

Page 68: Getting Sassy with CSS

Mixins Use

CSS Sass

Mixins output their contents where they are called.

Page 69: Getting Sassy with CSS

Mixin Output

MAGIC

Mixin Features

• argument defaults

• multiple arguments

• optional arguments

CSS

Sass

Page 70: Getting Sassy with CSS

Mixin Alternative?CSS

Page 71: Getting Sassy with CSS

Mixin Alternative?Better?CSS

Page 73: Getting Sassy with CSS

@extendLets you group selectors

with blocks of styles

MAGIC

Sass

CSS

Page 74: Getting Sassy with CSS

PlaceholdersPlaceholders can be @extended but will never compile to the CSS on their own

MAGIC

Sass

CSS

Page 75: Getting Sassy with CSS

Plus Lots More WIN

Page 76: Getting Sassy with CSS

Functions

Page 77: Getting Sassy with CSS

Conditions

Page 78: Getting Sassy with CSS

Each Loops

Page 79: Getting Sassy with CSS

For Loops

Page 80: Getting Sassy with CSS

While Loops

Page 81: Getting Sassy with CSS

Maps

Key-value pairs.

Multiple assignment in loops.

Lots of helper methods.

Page 82: Getting Sassy with CSS

Demo Timehttps://github.com/roytomeij/sassconf

Page 83: Getting Sassy with CSS
Page 84: Getting Sassy with CSS

Resources

Sass-Lang.com

The Sass Way

Sass For Web Designers

Assembling Sass

SassNews Newsletter

SassConf

SassConf 2013 Videos

SassMeister

Sass Style Guide

#teamSass

Page 85: Getting Sassy with CSS

Closing Tips• Take it one step at a time.

• Check your output.

• Don’t nest too deeply.

• Mind your @mixins and @media queries.

• Don’t @extend too much.

• Modularize all the things.

Page 86: Getting Sassy with CSS

Questions?

Getting Sassy with CSS

Julie Cameron @jewlofthelotus

CodeMash 2015 bit.ly/getting-sassy