./Oi! eu sou Lourdes

Presentation Code Developer @ R/GA Buenos Aires

@loumontano

./Agenda

./ What is Sass

./ Setup

./ File structure

./ Features

./ Useful Mixins

./ Good practices

./A Quick note about Sass

File structure

Partials - Sub-files compiled in one single CSS file@import - Defines the output order on the compiled CSS

./Features

Sass Features

- Variables- Nesting- Mixins- Extends / Placeholders- Math Operators- Functions- Control directives- Maps- and more!

Variables

- Same as other languages (placeholder name, scope, etc.)- Can use: color values, texts, booleans, numbers, etc.

Nesting

- Easy to read. Faster to write- Follow the 3 or 4 nesting levels rule (check generated CSS)

./Reusability

@mixin

- CSS rules that you can reuse- Use with dynamic values- Very useful for vendor prefixes- Used for reuse rules, not values

@extend

- For properties sharing without parameters- Con: it’s also generated on the CSS output

@extend + %placeholder

- Placeholders don’t get compiled on the CSS output- Can be used via @extend

./Functions

Math operators

Native Sass Functions

- Support math operators- HSL color functions available (Hue, Saturation, Lightness & Opacity)

Custom functions

- Allow calculations- Unlike @mixin, there is a @return for a value

./Control directives

Control directives @if

Control directives @for

http://codepen.io/loumontano/pen/WbzBgz?editors=010

Control directives @each

./Useful Mixins

Clearfix

Vertical align

Media Queries - Breakpoints

Grids

Animations

http://codepen.io/loumontano/pen/eJByH

Transitions

- Key/Value data sets- Unique list of keys- Access to the keys and values- Ability to iterate through these values

./Good practices

Think of a preprocessor as a magnifying glass: it can make good CSS great, but bad CSS terrible. It’s not a magic bullet.

Harry Roberts

Manejo responsable de Sass

The Good Sass dev Checklist

- Good file structure- Proper variable usage- Use mixins for dynamic values, otherwise use extend- Use functions for calculations- Limit nesting: 3 or 4 levels max- Like in CSS, avoid specificity- Check CSS output

Final thoughts

- Good for CSS code organization- Allows functions and variables handling- Tons of documentation available- Check CSS output- Sass helps you to write CSS faster, not better. (that’s up to you!)

Links

http://sass-lang.com/

http://terrificwebdesign.net/converting-css-sass/

http://thesassway.com/advanced

http://sass-guidelin.es/

http://sass-compatibility.github.io/

http://sassmeister.com/

http://thesassway.com/

http://www.sitepoint.com/html-css/css/sass-css/

http://jaredhardy.com/sassy-buttons/

http://bourbon.io/

./Valeu!@loumontano