Sass that CSS
description
Transcript of Sass 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!