SCSS vs. CSS

Sandra L

Udemy Instructor

Web design has come a long way. In the late 90s and early 2000s, developers created layouts for web pages using tables. That meant everything was square, and if you wanted any sort of round corners, gradients, or other design features, you would have to use a background image to get the effect.

Now web developers can not only create more dynamic designs for web pages but also separate the design from the HTML markup for a much cleaner development process. You can use a few technologies for this. CSS is the default style language that every web browser can understand. SCSS is a superset of the CSS language. Let’s look at both and determine which one is the best for your next web development project.

HTML & CSS – Quickstart | Ebook included

Last Updated March 2016

53 lectures
Beginner Level

4.6 (5)

HTML & CSS Quickstart-simple guide to get started with coding & build a solid foundation for advanced web development | By Sandra L

Explore Course

What is CSS?

CSS made its first appearance in 1994 at the WWW conference, but it wasn’t used widely or consistently in browsers until the mid-2000s. It stands for Cascading Style Sheets, which you can define as a scripting language that describes how HTML elements should show up in a web browser or when printing a web page.

CSS styles are stored in separate files using the .css file extension. Because of this separation from the markup, you can reuse them across multiple pages on a website or application. Web developers can update a style site-wide from just one file. CSS solved a big problem with designing web pages, allowing for more flexible web designs. Let’s look at how CSS works.

CSS example

Let’s look at an example. Here is an example web page:

Here is the HTML for the web page:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div id="myid">
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </div>

        <div class="myclass">
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </div>

    </body>
</html>

The CSS file is included in the head using a link tag. Here is the style sheet for the page:

body {
    background-color: yellow;
}
.myclass {
    background-color: white;
}
#myid {
    background-color: black;
}
.myclass h1 {
    color: gray;
    text-align: center;
}
.myclass p {
    color: black;
}
#myid h1 {
    color: yellow;
    text-align: center;
}
#myid p {
    color: white;
}

You can find a JSfiddle of this page here.

CSS selectors

CSS uses what we call selectors to find HTML elements on a web page. This is what the names before the brackets in the style sheet above are doing. The key and value pairs between the brackets are the styles that will apply to the element the selector is targeting. The style sheet uses four of the most common types of selectors. These are:

Element selector: To select a type of element, you simply use its name. The body element gets a background color of yellow in our CSS. We also use element selectors for the h1 and p elements by combining them with other selectors into what is called a descendant selector.
Class selector: To select an element by its class, you put a “.” before its name to select it. The style sheet does this to select the div with the myclass class. It sets the background color to white. You can also use class selectors in the descendant selectors.
Id selector: To select an element by its id, you put a # before its name to select it. The style sheet does this to make the background color of the div with the myid id black. You can also use it in some descendant selectors.
Descendant selector: These selectors show some of the power you have with CSS. There are four in the style sheet above that combine element selectors with class and id selector. You would use them to set styles in nested elements. The .myclass h1 selector will set the color of all the h1 elements inside the div with the myclass class to gray.

You can choose from quite a few other types of selectors, including children selectors that work like descendant selectors but select only the direct children, adjacent sibling selectors, direct sibling selectors, and more. You can also select elements based on attributes other than the class or id.

CSS properties

The styles for each element that you select will set in the declaration block between the braces. Each of these consists of a key and value separated by a colon and terminated by a semicolon. In our style sheet, we only set the color, background color, and text alignment of the elements on the page. But there are over 500 valid CSS attributes you can set. Some are specific and can only apply to certain types of elements.

Web developers often use other common properties that are self-explanatory:

margin
padding
border
width
height
font
border

You can learn more about CSS in my course.

What is SCSS?

SCSS stands for Sassy Cascading Style Sheets or Sassy CSS. It is a superset of the CSS language that adds additional functionality to CSS and gives web developers more flexibility and power when creating web designs. It uses the same syntax as CSS requiring brackets and semicolons to designate blocks and line endings. Another language with features similar to SCSS, called SASS, uses white space to designate blocks and line endings, similar to the Python programming language. Most browsers aren’t able to understand SCSS or SASS and must be compiled into CSS before you can use them in a browser. The extension used for an SCSS style sheet is .scss.

SCSS example

In order to see some of the basic differences between SCSS vs CSS, let’s convert the CSS for the example site to SCSS. You can do this online here.

$theme_gray: gray;
$theme_black: black;
$theme_yellow: yellow;
$theme_white: white;

body {
    background-color: $theme_yellow;
}
.myclass {
    background-color: $theme_white;
    h1 {
        color: $theme_gray;
        text-align: center;
    }
    p {
        color: $theme_black;
    }
}
#myid {
    background-color: $theme_black;
    h1 {
        color: $theme_yellow;
        text-align: center;
    }
    p {
        color: $theme_white;
    }
}

This SCSS file will be compiled back into the original CSS file before we can use it in the browser, but when you write in SCSS, you use this syntax, which has many advantages for development. Let’s look at the benefits seen in our SCSS file and a few more of the features that SCSS adds to the original CSS language.

SCSS has variables

The first thing you may notice is the four lines at the top of the SCSS file:

$theme_gray: gray;
$theme_black: black;
$theme_yellow: yellow;
$theme_white: white;

These are variables, just like in a programming language. You define them by using a leading dollar sign. There is an enormous benefit in using the SCSS language. Commonly, when using variables in SCSS, you would put them in a separate file in your SCSS projects. Including them first when compiling makes the variables available for use throughout the project.

Many times, a web design project starts with a style guide that defines all the colors used in a website. By creating a variables.scss file with the colors from the style guide when you get started, you will never have to look up the colors again. Also, when one of the colors change, you can update it in one spot, instead of dozens of places in the style sheets.

Although we only have shown using variables for colors, you can use them for anything. One example is fonts. Can you imagine having to get this right every time you have to use it:

$ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

SCSS uses nested syntax

Instead of using the descendant selector that gives us power to segregate styles in CSS, we use nesting in SCSS.

So this:

.myclass {
    background-color: $theme_white;
    h1 {
        color: $theme_gray;
        text-align: center;
    }
    p {
        color: $theme_black;
    }
}

Replaces this:

.myclass {
    background-color: white;
}
.myclass h1 {
    color: gray;
    text-align: center;
}
.myclass p {
    color: black;
}

Nesting has many benefits:

You can match the structure of your SCSS up to the structure of your HTML because you can nest both.
Nesting prevents the need to write the same selector over and over.
Nesting is a more natural syntax and is easier and faster to read and understand.
Nested styles are more maintainable.
Nesting keeps related styles together. You can use the descendent selector in CSS anywhere in your style sheets, and it can sometimes be hard to find which styles are affecting what.

Nesting is great, but don’t go overboard. SCSS still compiles down to CSS, and deeper nesting results in more lines. Another advantage to using SCSS is that you can plan your styles out ahead of time because the nested structure makes it easy. With a good style plan in place, nesting that is too deep shouldn’t be a problem.

SCSS has mixins

You can think of a mixin like a function. A mixin can accept parameters and return CSS. When writing CSS, you might find yourself writing similar sets of style properties over and over. Here is an example of a mixin that will generate a set of properties to style text:

@mixin set-text-style($family:'Tahoma', $weight: 500, $style: normal, $color: black) {
    font-family: $family , 'Arial', 'Helvetica', sans-serif;
    font-style: $style;
    font-weight: $weight;
    color: $color;
}

The mixin starts with the keyword @mixin. Then you give the mixin a name, like set-text-style. The parameters for the mixin are inside the parentheses. Our parameters are $family, $weight, $style, and $color. It will return the set of properties between the brackets with the variables replaced by the parameter we sent it to. The values behind the colon in the parameters list are the default values for the parameters. If you call the mixin without the parameter, the parameter will use the default value.

To use the mixin, just call it in place of a property in a SCSS file, by using @include, then the mixin with parameters.

h2 {
    @include set-text-style('Roboto', 600, 'italic', blue);
}

When this compiles, it will generate this CSS:

h2 {
    font-family: 'Roboto' , 'Arial', 'Helvetica', sans-serif;
    font-style: 'italic';
    font-weight: 600;
    color: blue;
}

If we don’t use any parameter, like this:

h2 {
    @include set-text-style();
}

It will return this as the default:

h2 {
    font-family: 'Tahoma' , 'Arial', 'Helvetica', sans-serif;
    font-style: 'normal';
    font-weight: 500;
    color: black;
}

We can also choose to only use some parameters by using keyword arguments. Here is how we would call the mixin to use all the default properties except the color, which it will set to red.

h2 {
    @include set-text-style($color red);
}

You can organize SCSS projects more easily

SCSS adds structure to your styles. With CSS, you can break up your style sheets into multiple files, organized by usage, but then you have to load all the files separately in the browser, each using a separate request. No matter how many files you break an SCSS style project into, you can compile them into one CSS file, so you have the freedom to organize the project however you want.

The @import keyword in SCSS allows you to import an SCSS file into another SCSS file. You can put your mixins in one file, place your variables in another, and then create as many other SCSS files as you need to break your styles into logical pieces and then import them all into the file that it will compile.

We only covered part of the features that SCSS has, but it is pretty evident that using SCSS has a lot of advantages over using CSS.

Here is a breakdown of the differences between CSS and SCSS.

Feature	CSS	SCSS
Expressiveness	Moderate	Advanced
Variable Support	Limited	Advanced
Nesting Support	No	Yes
Mixin Support	No	Yes
Easy to Organize	No	Yes

SCSS has many more features which we didn’t cover, including inheritance, functions (different from mixins), data types, control structures like if(), and more.

One thing that SCSS requires is compiling. So that will have to be added to your workflow. Many build tools can watch for changes in your SCSS files, re-compile whenever they detect an update and reload the browser. It may take time to learn how to use SASS and include compiling it in your workflow, but it is worth the effort. To learn more about the benefits of SCSS over CSS, check out this codepen and my YouTube video below.