Tutorials

Sass Introduction

Posted in Sass Tutorial

Updated on Nov 22, 2024

By Mari Selvan

👁️ 34 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Sass (Syntactically Awesome Style Sheets) is a powerful preprocessor scripting language that extends CSS (Cascading Style Sheets). By using Sass, you can write more maintainable, reusable, and flexible stylesheets.

Sass adds various features to CSS, such as variables, nested rules, mixins, functions, and inheritance, which streamline and enhance your CSS workflow.

🤔 What is Sass?

Sass is a CSS preprocessor, meaning it processes your Sass files and outputs standard CSS files that your web pages can use. This allows you to use a more expressive syntax and advanced features when writing your styles.

🔑 Key Features of Sass

Variables: Store reusable values (e.g., colors, fonts) in variables.
Nesting: Nest CSS selectors in a way that follows the same visual hierarchy of your HTML.
Partials and Import: Split your CSS into smaller, manageable files.
Mixins: Create reusable blocks of code that can be included in other selectors.
Inheritance: Share a set of CSS properties from one selector to another.
Operators: Perform calculations and manipulate values.

✅ Why Use Sass?

Sass offers numerous benefits that make it a preferred choice for many developers:

DRY Principle: Helps you adhere to the DRY (Don't Repeat Yourself) principle by allowing reuse of CSS snippets.
Maintainability: Makes your stylesheets easier to maintain and update.
Organization: Allows you to organize your CSS into smaller, reusable modules.
Advanced Features: Provides powerful features that are not available in regular CSS.
Community and Ecosystem: Extensive documentation, community support, and a rich ecosystem of plugins and frameworks.

🧱 Basic Structure of a Sass File

Sass files come in two syntaxes: the older, indented syntax (with the .sass extension) and the newer, SCSS (Sassy CSS) syntax (with the .scss extension). SCSS is more commonly used as it is fully compatible with CSS.

Example of SCSS Syntax:

scss

Copied

$primary-color: #333;

body {
  font: 100% Helvetica, sans-serif;
  color: $primary-color;
}

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

📊 Variables in Sass

Variables in Sass start with a $ symbol and are used to store values that you want to reuse throughout your stylesheet.

Example:

scss

Copied

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}

🔁 Nesting

Nesting allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Example:

scss

Copied

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

📥 Partials and Import

Partials are Sass files that are meant to be imported into other Sass files. They are typically named with a leading underscore (e.g., _variables.scss).

Example:

scss

Copied

// _variables.scss
$primary-color: #333;
$secondary-color: #666;

// styles.scss
@import 'variables';

body {
  color: $primary-color;
}

h1 {
  color: $secondary-color;
}

🌀 Mixins

Mixins allow you to create reusable chunks of CSS. You can pass in values to make them more flexible.

Example:

scss

Copied

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

.box { @include border-radius(10px); }

🧬 Inheritance

Inheritance in Sass allows one selector to inherit the styles of another selector using the @extend directive.

Example:

scss

Copied

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success { @extend .message; }
.error { @extend .message; }
.warning { @extend .message; }

➕ Operators

Sass supports operators for calculations, making it easy to create complex styles.

Example:

scss

Copied

.container {
  width: 100%;
}

.content {
  width: 600px / 960px * 100%;
}

🎉 Conclusion

Sass is a robust tool that enhances CSS by adding features that help you write cleaner, more efficient, and more manageable stylesheets. By incorporating Sass into your workflow, you can streamline your CSS development process and maintain a more organized codebase.