Sustainable SCSS

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

Start[missing "en.views.course_landing_page.learn-sass.course_illustration" translation]
Sustainable SCSS
Lesson 1 of 1
  1. 1

    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...

  2. 2

    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.

  3. 3

    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 [...] rule to allow incl...

  4. 4

    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 th...

  5. 5

    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...

  6. 6

    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 *...

  7. 7

    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...

  8. 8
    • 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 *...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Sustainable SCSS

Start[missing "en.views.course_landing_page.learn-sass.course_illustration" translation]