that CSS
that CSS
What is SASS?
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
— Hampton CatlinOriginally wrote Sass
The trouble with CSS.- Super long, cluttered files.- Lots of repetitive code.- Vendor prefixes.- Difficult to maintain.- Messy!
But I don’t want to learn another language...
Sass to the rescue.- Variables!- Nesting!- Math!
- Mixins!- Extends!- Functions!
Let’s get Sassy...
1. Variables
SASS
CSS
Variables$variable: value;
- Store a value and call it elsewhere in your stylesheets.
- Can be any color, number, text, etc.
2. Nesting
SASS
CSS
Nesting- Clean up your CSS
files with shorter selectors.
- Easier to follow.
SASS
CSS
Nesting- Nesting works with
multiple selectors.
SASS
CSS
Nesting- Parent selector: &
For adding context within a nested area.
SASS
CSS
Nesting- Parent selector: &
For adding context within a nested area.
Handy when teamed up with Modernizr!
3. Math
SASS
CSS
Math- Who doesn’t love
math?
- Smooth operators:+ - * / %
4. Mixins
SASS
CSS
Mixins- Reuse chunks of CSS
- Start with @mixin and give it a unique name.
- To apply it, add @include name
SASS
CSS
Mixins- Mixins can have
variables.
- Variables can also have default values.
5. Extend
SASS
CSS
Extend- Abstract your CSS!
- Save your HTML from being overrun by repetitive classes.
- Share your CSS styles across multiple selectors.
6. Functions
SASS
CSS
Functions- Logic! Just like real
programmers use.< > <= => != ==
- Bonus, you can have conditional or looped CSS.if(), @if, @for, @while, @each
SASS
CSS
Functions- Generate CSS with
loops and variables.
SASS
CSS
Functions- Write your own
custom functions with: @function and @return
This seems like a lot...- Where do I even begin?- How do I keep all this organized?- I have to use TERMINAL..?!- Never mind, I’m switching back to
print design.
Don’t worry!- You can refactor over time.- Use partials and @import to
organize your Sass files.- Tons of frameworks exist!- Not to mention plenty of compiler GUIs.
Partials- A file with CSS or Sass. Starts with _ and ends with .scss
- These can be @import’ed into one main SCSS file.
_header.scss
_footer.scss
_body.scss style.scss style.css
Frameworks- Plenty of libraries out there. Primarily, Compass!
Frameworks- Background size
- Border radius
- Box shadow
- Inline block
- Opacity
- Text shadow
- Vertical rhythm
- Sprites
SASS
CSS
Frameworks- Compass keeps your
CSS up to date with all the latest browser quirks.
Demo time!