Learn Sass: Course OverviewCourse Overview

Sustainable SCSS

Learn about the best Sass practices such as partial files, placeholders and @import.

Start

Sustainable SCSS

Lesson 1 of 1

1
Sasstainability
Sass can be confusing if it’s not organized correctly. In this unit, we will dive into the language’s best practices. From file organization, to understanding when is best to include a mixin or e…
Start
2
Sass Structure
We’ll start with best practices for organizing files. As your web app or web page grows in complexity, so will the styles that go along with it. It’s best to keep code organized.
Start
3
@Import in SCSS
In addition to having a solid file structure, a big part of staying organized is splitting up the logic into smaller manageable components. Sass extends the existing CSS @import rule to allow incl…
Start
4
Organize with Partials
Partials in Sass are the files you split up to organize specific functionality in the codebase. * They use a _ prefix notation in the file name that tells Sass to hold off on compiling the file…
Start
5
@Extend
Many times, when styling elements, we want the styles of one class to be applied to another in addition to its own individual styles, so the traditional approach is to give the element both classes…
Start
6
%Placeholders
Sometimes, you may create classes solely for the purpose of extending them and never actually use them inside your HTML. Sass anticipated this and allows for a special type of selector called a *…
Start
7
@Extend vs @Mixin
Sweet! Recall that mixins, unlike extended selectors, insert the code inside the selector’s rules wherever they are included, only including “original” code if they are assigning a new value to the…
Start
8
Generalizations
* Sustainability is key in Sass, planning out the structure of your files and sticking to naming conventions for both variables, mixins, and selectors can reduce complexity. * Understanding **…
Start