Sass that CSS
description
Transcript of Sass that CSS
![Page 1: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/1.jpg)
that CSS
![Page 2: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/2.jpg)
What is SASS?
![Page 3: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/3.jpg)
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
![Page 4: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/4.jpg)
The trouble with CSS.- Super long, cluttered files.- Lots of repetitive code.- Vendor prefixes.- Difficult to maintain.- Messy!
![Page 5: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/5.jpg)
But I don’t want to learn another language...
![Page 6: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/6.jpg)
Sass to the rescue.- Variables!- Nesting!- Math!
- Mixins!- Extends!- Functions!
![Page 7: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/7.jpg)
Let’s get Sassy...
1. Variables
![Page 8: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/8.jpg)
SASS
CSS
Variables$variable: value;
- Store a value and call it elsewhere in your stylesheets.
- Can be any color, number, text, etc.
![Page 9: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/9.jpg)
2. Nesting
![Page 10: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/10.jpg)
SASS
CSS
Nesting- Clean up your CSS
files with shorter selectors.
- Easier to follow.
![Page 11: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/11.jpg)
SASS
CSS
Nesting- Nesting works with
multiple selectors.
![Page 12: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/12.jpg)
SASS
CSS
Nesting- Parent selector: &
For adding context within a nested area.
![Page 13: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/13.jpg)
SASS
CSS
Nesting- Parent selector: &
For adding context within a nested area.
Handy when teamed up with Modernizr!
![Page 14: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/14.jpg)
3. Math
![Page 15: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/15.jpg)
SASS
CSS
Math- Who doesn’t love
math?
- Smooth operators:+ - * / %
![Page 16: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/16.jpg)
4. Mixins
![Page 17: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/17.jpg)
SASS
CSS
Mixins- Reuse chunks of CSS
- Start with @mixin and give it a unique name.
- To apply it, add @include name
![Page 18: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/18.jpg)
SASS
CSS
Mixins- Mixins can have
variables.
- Variables can also have default values.
![Page 19: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/19.jpg)
5. Extend
![Page 20: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/20.jpg)
SASS
CSS
Extend- Abstract your CSS!
- Save your HTML from being overrun by repetitive classes.
- Share your CSS styles across multiple selectors.
![Page 21: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/21.jpg)
6. Functions
![Page 22: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/22.jpg)
SASS
CSS
Functions- Logic! Just like real
programmers use.< > <= => != ==
- Bonus, you can have conditional or looped CSS.if(), @if, @for, @while, @each
![Page 23: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/23.jpg)
SASS
CSS
Functions- Generate CSS with
loops and variables.
![Page 24: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/24.jpg)
SASS
CSS
Functions- Write your own
custom functions with: @function and @return
![Page 25: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/25.jpg)
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.
![Page 26: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/26.jpg)
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.
![Page 27: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/27.jpg)
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
![Page 28: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/28.jpg)
Frameworks- Plenty of libraries out there. Primarily, Compass!
![Page 29: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/29.jpg)
Frameworks- Background size
- Border radius
- Box shadow
- Inline block
- Opacity
- Text shadow
- Vertical rhythm
- Sprites
![Page 30: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/30.jpg)
SASS
CSS
Frameworks- Compass keeps your
CSS up to date with all the latest browser quirks.
![Page 31: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/31.jpg)
![Page 32: Sass that CSS](https://reader033.fdocuments.net/reader033/viewer/2022050920/54c3526f4a7959275d8b457a/html5/thumbnails/32.jpg)
Demo time!