SASS Basics: Understanding Variables, Mixins, and Nesting

The MERN Handbook Article 4: Stage 0 HTML and CSS Fundamentals - Topic 2: Introduction to SASS

Welcome back to "The MERN Handbook." In this fifth article the series, we'll explore SASS (Syntactically Awesome Style Sheets). SASS is a preprocessor scripting language that extends CSS, enabling you to write more efficient, maintainable, and scalable stylesheets. We'll cover the basics of SASS, including variables, mixins, and nesting.

What is SASS?

SASS is a CSS preprocessor that adds several features to CSS, making it more powerful and easier to manage. It allows you to use variables, nested rules, mixins, and functions, which are not available in standard CSS. SASS files are typically written with a .scss extension and compiled into regular CSS files that browsers can understand.

Setting Up SASS

Before diving into SASS, you need to set up your development environment:

  1. Install Node.js and npm: Ensure you have Node.js and npm installed.

     node -v
     npm -v
    
  2. Install SASS: Use npm to install SASS globally.

     npm install -g sass
    
  3. Create a SASS File: Create a new file with a .scss extension, for example, styles.scss.

  4. Compile SASS to CSS: Use the SASS command to compile your .scss file into a .css file.

     sass styles.scss styles.css
    

SASS Variables

Variables in SASS allow you to store values that you can reuse throughout your stylesheet. This helps maintain consistency and makes it easier to update your styles.

Example:

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

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

In this example, $primary-color and $font-stack are variables that store color and font values, respectively. These variables are then used within the body selector.

SASS Nesting

Nesting in SASS allows you to nest CSS selectors within each other, following the same visual hierarchy of your HTML. This makes your CSS more readable and easier to manage.

Example:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
          color: darken($primary-color, 10%);
        }
      }
    }
  }
}

In this example, the ul, li, and a selectors are nested within the nav selector, following the structure of the HTML.

SASS Mixins

Mixins in SASS allow you to create reusable chunks of CSS that you can include in other selectors. This is particularly useful for styles that are used repeatedly throughout your stylesheet.

Example:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(10px);
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

In this example, the border-radius mixin is created to apply rounded corners. The mixin is then included in the .button selector.

Practical Implementation

Let's create a practical example using variables, nesting, and mixins.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SASS Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <button class="button">Click Me</button>
</body>
</html>

styles.scss:

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

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

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
    background-color: $secondary-color;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: white;
        padding: 10px 20px;

        &:hover {
          color: darken(white, 10%);
        }
      }
    }
  }
}

.button {
  @include border-radius(10px);
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

Compile SASS to CSS:

sass styles.scss styles.css

This will compile the styles.scss file into a styles.css file that can be linked to your HTML.

Conclusion

SASS is a powerful tool that extends CSS with features like variables, mixins, and nesting. These features help you write more efficient, maintainable, and scalable stylesheets. By incorporating SASS into your workflow, you can streamline your CSS development process and enhance your web projects.

💡
If you have any questions or need further guidance, feel free to join my 30-minute one-on-one interactive session. Get personalized mentorship and answers to your queries. Book your session here: Dev Chat.

Did you find this article valuable?

Support Kabeer Hadi by becoming a sponsor. Any amount is appreciated!