Sass Basics

Sass Basics

Introduction

Sass (Syntactically Awesome Stylesheets) is a powerful CSS preprocessor that enhances CSS with variables, nesting, mixins, functions, and more. It helps developers write cleaner, more maintainable, and more efficient styles.

In this guide, we will cover the basics of Sass, including installation, syntax, and essential features.

Step 1: Installing Sass

Before using Sass, you need to install it. You can install Sass globally on your system or use it with Node.js.

1.1 Install Sass via npm (Recommended)

If you have Node.js installed, run the following command:

npm install -g sass

1.2 Install Sass via Homebrew (For Mac users)

brew install sass/sass/sass

1.3 Check Sass Version

To verify Sass is installed, run:

sass --version

Step 2: Sass Syntax (SCSS vs. Indented Syntax)

Sass comes in two syntaxes:

1. SCSS (Sassy CSS) – Uses curly braces {} and semicolons ; (similar to CSS).
2. Indented Syntax (Sass) – Uses indentation instead of brackets and semicolons.

👉 SCSS Example:

$primary-color: #3498db;

body {
  background-color: $primary-color;
  h1 {
    color: white;
  }
}

👉 Indented Syntax Example:

$primary-color: #3498db

body
  background-color: $primary-color
  h1
    color: white

💡 SCSS is more popular since it’s closer to traditional CSS.

Step 3: Using Variables in Sass

Variables store values like colors, fonts, and sizes for reuse.

$main-color: #ff5733;
$font-stack: "Arial, sans-serif";

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

Step 4: Nesting in Sass

Sass allows you to nest selectors inside one another, making the code more readable.

nav {
  background: #222;

  ul {
    list-style: none;

    li {
      display: inline-block;
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

Step 5: Partials and Importing

You can split your styles into smaller files (partials) and import them into a main stylesheet.

5.1 Create a Partial File

Save a file starting with an underscore _variables.scss:

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

5.2 Import the Partial into Another File

@import "variables";

body {
  background-color: $bg-color;
  color: $text-color;
}

Step 6: Mixins for Reusability

Mixins allow you to reuse styles with parameters.

@mixin button($color) {
  background: $color;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.btn-primary {
  @include button(#3498db);
}

.btn-danger {
  @include button(#e74c3c);
}

Step 7: Using Extend to Avoid Repetition

The @extend feature lets one selector inherit another's styles.

.message {
  padding: 10px;
  border-radius: 5px;
}

.success {
  @extend .message;
  background: green;
}

.error {
  @extend .message;
  background: red;
}

Step 8: Compiling Sass to CSS

To convert .scss files into .css, run:

sass input.scss output.css

For automatic compilation:

sass --watch input.scss:output.css

Conclusion

Sass simplifies and improves CSS with variables, nesting, mixins, and more. Mastering Sass will enhance your styling workflow and improve project maintainability.

Try Sass in your next project and make CSS development more efficient! 🚀

Would you like any modifications or additions? 😊