Debugging in the Browser with Source Maps

With source maps (i.e. the .css.map files), we can use our browser’s developer tools to view the original Sass source, instead […]

Read More

6. Defining Media Queries

There are many benefits to using Sass when building or refactoring responsive layouts. In this video, we’ll cover some the […]

Read More

5. Convert Repeating Declaration Groups Into Mixins

Mixins are a smart way of reusing our code. One of the last steps in refactoring is replacing common patterns […]

Read More

4. Create Variables for Repetitive Values

Styles File Structures The _extends.scss file contains all the placeholders that you’ll @extend in your partials. scss |__ style.scss |__ base | _index.scss | […]

Read More

3. Nest Where It Makes Sense

Don’t over-nest code! Refer to the following page for more details on Nested Selectors Ampersand (&)

Read More

2. Extract Repeating Patterns Into Extends

Common Sass Structures The _extends.scss file contains all the placeholders that you’ll @extend in your partials. scss |__ style.scss |__ base | _index.scss | […]

Read More

1. Break Related Sections Into Partials

Common Sass Structures An example would be scss |__ style.scss |__ base | _index.scss | _base.scss |__components | _index.scss | […]

Read More

Refactoring CSS to Sass

Break related sections into partials Extract repeating patterns into extends Nest where it makes sense Create variables for repetitive values […]

Read More