CSS Preprocessors: SASS/SCSS Basics

Introduction

SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that adds powerful features like variables, nesting, mixins, and functions, making stylesheets more maintainable and efficient.

1. What is SASS/SCSS?

SASS comes in two syntaxes:

• SASS (Indented Syntax): Uses indentation instead of braces.
• SCSS (Sassy CSS): Similar to CSS but with additional features.

Example SCSS:

$primary-color: #3498db;
body {
    background-color: $primary-color;
}

2. Installing SASS

Use Node.js and npm:

npm install -g sass

Compile SCSS to CSS:

sass style.scss style.css

3. Features of SASS/SCSS

Variables

$font-size: 16px;
p {
    font-size: $font-size;
}

Nesting

nav {
    ul {
        list-style: none;
    }
}

Mixins (Reusable Styles)

@mixin button-style {
    background: blue;
    color: white;
    padding: 10px;
}

button {
    @include button-style;
}

Functions

@function double($value) {
    @return $value * 2;
}
div {
    width: double(10px);
}

Importing Files

@import 'buttons'

4. Advantages of SASS

• Modular and reusable code
• Faster development
• Better organization

Conclusion

SASS/SCSS enhances CSS with advanced features, making stylesheets more efficient and scalable.