Transcript
./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
top related