From CSS to SCSS: Elevate Your Web Development Game

SCSS (Sassy CSS) is an extension of CSS that allows us to write CSS in more maintainable manner. It allows features like variables, nesting, mixins and importing.

Learning it will elevate your web development game to the next level and help you make your project’s styling more manageable.

Benefits

1. More enhanced syntax
2. Simplifies the process of writing CSS
3. Ability to reuse styles
4. Cleaner Code
5. Mixins and Extending styles

Get Started with SCSS

To get started with SCSS you first need to install it in your system, the installation can be done via npm (node package manager) if you have node.js installed.

npm install -g sass

Now you can create your first SCSS file — create a new file with the .scss extension, for example styles.scss and then start writing code inside it.

For example:

$text-color: #333;
$bg-color: #f8f8f8;

body {
  font-family: Arial, sans-serif;
  color: $text-color;
  background-color: $bg-color;
  
  h1 {
    font-size: 2rem;
    text-align: center;
  }
}

After that you have made your SCSS file then it is needed to be compiled down to standard CSS for browsers to understand.

sass styles.scss styles.css

CSS compiled from SCSS

Also, if you want to compile the changes automatically then use the --watch flag.

sass --watch styles.scss style.css

SCSS Features

Variables | Nesting | Mixins | Partials & Imports

1. Variables — Allows you to define variables that can store values like colors, fonts, sizes, or any CSS property. These variables can be reused throughout your stylesheet.

CSS →

body {
    color: #3498db; /* Hardcoded color */
    font-family: 'Helvetica Neue', sans-serif; /* Hardcoded font */
}

SCSS →

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', sans-serif;

body {
    color: $primary-color;
    font-family: $font-stack;
}

Now, if you want to change any value then you just need to modify it at one place.

2. Nesting —Nesting in SCSS allows you to write CSS selectors in a way that is similar to the HTML structure.

Nesting and Typical CSS difference

CSS →

nav {
    background-color: #3498db; /* Hardcoded color */
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

SCSS →

nav {
    background-color: $primary-color;

    ul {
        list-style: none;

        li {
            display: inline-block;

            a {
                color: white;
                text-decoration: none;
            }
        }
    }
}

It reduces repetition and keeps related styles together, this allows to understand the relationship between elements.

3. Mixins —Mixins allows you to create reusable styles that can be included in other places of your code.

CSS →

.button {
    border-radius: 5px; /* Hardcoded value */
    background-color: #3498db; /* Hardcoded color */
    color: white;
}

SCSS →

@mixin rounded-corners($radius) {
    border-radius: $radius;
}

.button {
    @include rounded-corners(5px);
    background-color: $primary-color;
    color: white;
}

4. Partials and Imports — SCSS allows you to break your styles into smaller and manageable files (partials) and import then into your main SCSS file.

CSS →

/* styles.css */

/* Variables */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-stack: 'Helvetica Neue', sans-serif;
}

/* Header Styles */
header {
    background-color: var(--primary-color);
    color: white;
    padding: 20px;
}

header h1 {
    font-size: 2.5em;
    margin: 0;
}

/* Button Styles */
.button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.button-secondary {
    background-color: var(--secondary-color);
}

/* Footer Styles */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 15px;
}

Now, to create partials you need to name them preceding with an underscore (`_`) in the name, for example — _variables.scss.

examples of partials

Create these files —

• _variables.scss
• _header.scss
• _buttons.scss
• _footer.scss
• styles.scss

After adding your styles in these files, import all these files inside the styles.scss

@import 'variables';
@import 'base';
@import 'layout';
@import 'components';

Useful Resources

Video Tutorial — Sass Tutorial for Beginners — CSS With Superpowers (youtube.com)

Documentation — Sass: Documentation (sass-lang.com)

I hope it helped : )

Follow me on X (formerly Twitter) — Kamalveer Singh (@kamal_stark_) / X