Produce Maintainable CSS With Sass

Getting Started

It's time to get your hands dirty with Sass! 🤜🤛 We'll get started by covering Sass' syntax; what it looks like and how to write it, with some exercises to practice with as we go along. This lets you dive into Sass and see your results in real time, without having to install anything on your machine! 🌟

Later, you’ll be using Sass on your local machine, where you’ll configure the compiler to process your code in the same instantaneous manner. But first, let’s just focus on writing Sass itself!

Two ways of doing the same thing

There are two different ways to write Sass, which can be denoted by their file extensions:  .sass  and .  scss  .

Up until now, all of the CSS precompiler snippets you have seen have been done using Sass' .scss syntax. It looks an awful lot like regular CSS with some extra Sass sugar sprinkled on top:

.nav {
    padding-right: 6rem;
    flex: 2 1 auto;
    text-align: right;
    nav__link {
        display: inline;
        font-size: 3rem;
        padding-left: 1.5rem;
        nav__link--active {
            color: #001534;;
        }
    }
}

The  .scss  syntax is rooted in the standard CSS syntax. In fact, you can write standard CSS within a  .scss  file seamlessly. The syntax that is specific to  .scss  only surfaces when you start to use Sass tools, such as variables and functions, where you prefix variables with dollar signs ( $ ), and functionality keywords with at signs ( @ ). We’ll cover how to use these tools in detail throughout the course. The important thing right now is that you can apply what you know about writing CSS directly to writing Sass with the  .scss  syntax.

Start by declaring the selector, whether it's a class, element, etc., followed by a set of curly braces, which you fill in with the necessary properties and value:

.class-selector {
    color: white;
    background-color: black;
    }

But you also have the option of writing in the .sass syntax:

.class-selector
    color: white
    background-color: black

While  .scss  looks a lot like regular CSS,  .sass  has a far more concise syntax. Gone are the curly braces and semicolons! Instead, it relies solely on tabs and line returns to format the code.  .sass  syntax yields a cleaner, more legible codebase. Skipping all of the extra punctuation will also allow you to write more quickly.

Try it out for yourself!

Ready to do it yourself in this interactive exercise? In the  .scss  file, you will...

• Create a class selector called .test

• Add two properties of your choosing, such as background-color, or padding.

• Add the test class to the HTML div and view the results!

If your new class modifies the style of the div you've chosen, well done! You're coding in Sass.

One syntax to rule them all

Encountering .sass in the wild is pretty uncommon; when someone talks about Sass, they are nearly always talking about  .scss  . The odds of ever needing to write .sass professionally are unlikely. So, it only makes sense that we use  .scss  in this course.

Now that you know the basics of Sass and how to write it, you can begin using it to write cleaner code, which we’ll do in the next chapter!

Let's recap!

• Existing CSS code will run correctly in Sass.

• .scss  syntax is similar to CSS syntax.

• .scss  is more commonly used than the more concise  .sass  syntax.