How SASS makes your life 1000% easier

How SASS Can Make Your Life 1000% Easier

• What are CSS preprocessors? • How do we install
them? • Digging into variables and mixins

What are CSS Preprocessors ?

CSS preprocessors take care of mundane tasks for you •
They do grunt work for you! • By definition, they take a file (LESS or SASS), and process it into CSS • You then use the CSS it made in the <head> of your website as usual (using the LESS or SASS file in the <head> won’t work!)

2 Common Preprocessors: • SASS (Syntactically Awesome Style Sheets) •
LESS (Leaner CSS)

Both are ﬁne. • SASS does more stuﬀ (generally). •
LESS works on Windows very easily (SASS is built in Ruby, which by default isn’t installed on Windows)

How do we install them?

Applications that process SASS or LESS for you • Codekit
($29) • PrePros (free to $24) • Grunt (free)

Windows: • Install PrePros Mac: • Install Codekit or •
Install PrePros

Add your project to Codekit / PrePros [Demo]

Digging In (from here on out we’re just using SASS)

The Basics 1. Create a stylesheet and save as ________.scss
2. Start writing SASS and/or CSS in your .scss file (CSS is always valid in a .scss file) 3. Save the file. Codekit / PrePros will compile it for you as “_________.css” 4. Uses the .css in your <head> as usual!

What are variables and mixins? They are reusable pieces of
code (so you type less and smile more)

Variables $padding: 1em; $pink: #f0f; $header-‐color: $pink;
$green: #85C3AF; $ denotes a variable Name it whatever you want Add whatever value you want it to hold: colors, padding, other variables, etc.

Variables (example) .header { background-‐color: $header-‐color;
display: block; margin: 1em; padding: $padding; } .section { color: $green; padding: $padding; } This is the same as if you wrote…

Variables (example) .header { background-‐color: #f0f;
display: block; margin: 1em; padding: 1em; } .section { color: #85C3AF; padding: 1em; }

Mixins @mixin transition($item) { -‐moz-‐transition: $item
.2s ease-‐in-‐out; -‐webkit-‐transition: $item .2s ease-‐in-‐out; transition: $item .2s ease-‐in-‐out; } @mixin transparent-‐bg($color) { background-‐color: $color; background-‐color: rgba($color, .7); } Call @mixin first Name it whatever you want Tell it the variable you’re going to set Put that variable wherever you need it repeated in your CSS

Mixins (example) .alert-‐box { color: white;
@include transparent-‐bg($green); @include transition(color); } .alert-‐box:hover { color: black; } This is the same as if you wrote… To use a mixin in your SCSS, call it using @include Put the item that you need to use in the parentheses. Can be a variable or regular text

Mixins (example) .alert-‐box { color: white;
background-‐color: #85C3AF; background-‐color: rgba(133, 195, 175, .7); -‐moz-‐transition: color .2s ease-‐in-‐out; -‐webkit-‐transition: color .2s ease-‐in-‐out; transition: color .2s ease-‐in-‐out; } .alert-‐box:hover { color: black; }

Resources • Lynda Tutorials • Official Beginner's Guide • More
beginner tutorials from The Sass Way

How SASS makes your life 1000% easier

How SASS makes your life 1000% easier

thebeckyhamm

More Decks by thebeckyhamm

Other Decks in Design

Featured

Transcript

How SASS Can Make Your Life 1000% Easier

• What are CSS preprocessors? • How do we install

What are CSS Preprocessors ?

CSS preprocessors take care of mundane tasks for you •

2 Common Preprocessors: • SASS (Syntactically Awesome Style Sheets) •

Both are ﬁne. • SASS does more stuﬀ (generally). •

How do we install them?

Applications that process SASS or LESS for you • Codekit

Windows: • Install PrePros Mac: • Install Codekit or •

Add your project to Codekit / PrePros [Demo]

Digging In (from here on out we’re just using SASS)

The Basics 1. Create a stylesheet and save as ________.scss

What are variables and mixins? They are reusable pieces of

Variables $padding: 1em; $pink: #f0f; $header-‐color: $pink;

Variables (example) .header { background-‐color: $header-‐color;

Variables (example) .header { background-‐color: #f0f;

Mixins @mixin transition($item) { -‐moz-‐transition: $item

Mixins (example) .alert-‐box { color: white;

Mixins (example) .alert-‐box { color: white;

Resources • Lynda Tutorials • Official Beginner's Guide • More