What is Why SASS exists?

SASSmarkup~5 mins

Why SASS exists

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

SASS helps write CSS faster and easier by adding useful features that plain CSS does not have.

When you want to organize your CSS better for big websites.

When you want to reuse styles without copying code again and again.

When you want to use variables for colors or sizes to change them easily later.

When you want to write CSS with less mistakes and cleaner code.

When you want to use math or logic in your styles.

Syntax

SASS

$variable-name: value;

.selector {
  property: value;
  @include mixin-name;
  @if condition {
    property: value;
  }
}

SASS uses variables starting with $ to store values like colors or sizes.

You can use @include to reuse groups of styles called mixins.

Examples

Using a variable for the button background color makes it easy to change later.

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  color: white;
}

Mixin lets you reuse the rounded corners style in many places.

SASS

@mixin rounded-corners {
  border-radius: 10px;
}

.box {
  @include rounded-corners;
  background: lightgray;
}

You can add conditions to change styles based on variables.

SASS

$theme: dark;

@if $theme == 'dark' {
  body {
    background: black;
    color: white;
  }
}

Sample Program

This example shows how SASS variables can store colors and spacing to keep styles consistent and easy to update.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SASS Example</title>
  <style>
    $main-color: #e67e22;
    $padding: 1rem;

    .card {
      background-color: $main-color;
      padding: $padding;
      border-radius: 0.5rem;
      color: white;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="card">This is a card with SASS variables.</div>
</body>
</html>

OutputSuccess

Important Notes

SASS code needs to be converted (compiled) into regular CSS before browsers can use it.

Using variables and mixins helps keep your styles consistent and easier to maintain.

Summary

SASS adds features like variables, mixins, and conditions to CSS.

It helps write cleaner, reusable, and easier-to-change styles.

SASS must be compiled into normal CSS for browsers to understand.