What is ?And Why You Should Be SASSy

by Lucas Castro

Laziness is Good!

Laziness is Good!

• Cultural notion that designers and devs think differently (right VS left).

• Thinking adapts to the activities we do.

• Design lends itself to uniqueness.

• Coding lends itself to "laziness."

Laziness leads to Innovation

• Smart laziness = drive to be efficient.

• Developers are always finding ways to be more efficient.

• When the tools are inadequate, we build new tools.

• This notion powers the open-source community.

HTML is Repetitive• HTML + CSS form the basis for web development.

• By itself, HTML is static.

• Forces manual repetition, because it cannot be setup as modules or templates.

• We quickly learn this in practice, when a client asks for a change to repetitive sections, like headers and footers.

• Problem can be solved with templating languages and server-side languages.

CSS is Repetitive

• Properties are often repeated (e.g., border radius and shadows).

• Values are often repeated throughout a site (e.g., colours and font properties).

• Selector hell…

Don’t Repeat YourselfThe “DRY” Principle

–Chris Peters

“A basic strategy for reducing complexity to manageable units is to

divide a system into pieces.”

Keeping Your Styles DRY

• Not repeating property: value pairs.

• Not repeating values.

• Not repeating selectors.

• Making your code modular.

• Making code more legible and manageable.

What is ?

What is SASS?

• Official site calls it "CSS with superpowers."

• SASS is a CSS extension language.

• Has many powerful features beyond what static CSS can provide.

• SASS is a preprocessing language that compiles into CSS

Reasons to Use SASS

• Reduces development time.

• Follows the DRY principle.

• Makes code cleaner and more legible.

FeaturesFocusing on High Impact for New Users

• Fixes selector hell.

• Specific context » generic children » interaction states

Nesting

–Mario Ricalde

“The Inception Rule: don’t go more  than four levels deep.”

• Children go inside a parent’s { } brackets.

• Ampersand (&) refers to current chain of selectors.

• Useful for adding selectors before the current chain.

• Useful for adding classes and pseudo-classes.

Nesting — Syntax

• E.g., colour palette, box padding, border radius, font sizes, font families, etc.

• Keep values DRY.

• Organize repeatable values in one place.

• Can be used with operators, mixins, and functions.

Variables

• Dollar symbol ($) prefix.

• Follows the same rule as CSS properties.

• $name: value;

Variables — Syntax

Mixins

• Output lines of SASS.

• Contents can be the same as SASS in general.

• E.g., selectors, properties, values.

• Can call functions and other mixins.

• AVOID using mixins when all you need is a value (see section on Functions).

• Definition:

• @mixin name ($variables: value) { [mixin output]}

• Call:

• @include name ($values);

Mixins — Syntax

Functions• Return a value.

• Can be used anywhere that calls for a value.

• Typically used for performing operations and running values through other functions.

• SASS has dozens of built-in functions for manipulating colours, opacity, strings, numbers, lists, and arrays.

• Power some of the best SASS libraries.

• Definition:

• @function name ($variables: value) { [operations on $variables] @return $variables;}

• Call:

• name ($values)

Functions — Syntax

Selector Inheritance

• Used to extend styles of one element to others.

• Powerful way to avoid repetition.

• Placeholders can be used to minimize CSS footprint.

• Selector:

• [selector] { }

• Placeholder — use percentage symbol (%) prefix:

• %placeholder { }

• Call:

• @extend [selector or placeholder];

Inheritance — Syntax

Selector Inheritance

• CAUTION: Child styles from the source element will be passed on to the target of the @extend directive.

Partials

• Allow for modularity with SASS code.

• Unlike CSS @import, SASS @import is compiled.

• No additional HTTP request is made.

• Underscore (_) prefix.

• Will not compile individually.

• Call:

• @import “partial”;

Partials — Syntax

Putting It All TogetherA Sample Project

Getting Started

–Zig Ziglar

“You don't have to be great to start, but you have to start to be great.”

Getting Started

• SCSS syntax is a superset of, and fully compatible with, CSS!

• Simplest, and most high impact, way to start is using variables and nesting.

• Work your way up to using selector inheritance, mixins, and functions.

Getting Started — Tools

• Can use Compass to compile via the command line.

• Free apps include Scout and Koala.

• Excellent paid app: Prepros.

• Less featured-rich free version available.

• http://prepros.io

Getting Started — Tools• Explore using an on-demand grid system, such as

Neat or Susy.

• Powered by SASS variables, mixins, and functions.

• Lightweight CSS output, compared to frameworks such as Bootstrap and Foundation.

• Neat pairs nicely with Bourbon, which is a lightweight mixin library.

Time to Get S SSy

Any Questions?

Lucas Castro

lucas.castro@gmail.com

@lucasunplugged

castrolucas

g

k

Get in Touch!