0
0
SASSmarkup~5 mins

CSS limitations that SASS solves

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

CSS can be hard to manage when styles get big. SASS helps by making CSS easier to write and organize.

When you want to reuse colors or fonts in many places without typing them again.
When your CSS files become very long and hard to read.
When you want to create styles that change based on conditions or loops.
When you want to split your styles into smaller files and combine them easily.
When you want to write CSS faster with less repeated code.
Syntax
SASS
$variable-name: value;

@mixin mixin-name() {
  property: value;
}

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

@import 'filename';

Variables start with $ and store values like colors or sizes.

Mixins are reusable groups of CSS rules you can include anywhere.

Examples
This example shows how to use a variable for a color to keep it consistent.
SASS
$main-color: #3498db;

.button {
  background-color: $main-color;
  color: white;
}
This mixin adds rounded corners and shadow, which you can reuse in many places.
SASS
@mixin rounded() {
  border-radius: 0.5rem;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.card {
  @include rounded;
  padding: 1rem;
}
You can split CSS into files like buttons.scss and import them to keep code organized.
SASS
@import 'buttons';

.container {
  max-width: 60rem;
  margin: 0 auto;
}
Sample Program

This example shows a styled button using variables and mixin features from SASS, compiled to CSS. The button has a blue background, white text, rounded corners, and a shadow. It changes color when hovered.

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>
    /* Compiled CSS from SASS */
    :root {
      --main-color: #3498db;
    }
    .button {
      background-color: var(--main-color);
      color: white;
      border-radius: 0.5rem;
      padding: 0.75rem 1.5rem;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
      transition: background-color 0.3s ease;
    }
    .button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>
OutputSuccess
Important Notes

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

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

Organizing CSS with SASS makes large projects simpler to maintain.

Summary

SASS solves CSS problems by adding variables, mixins, and file imports.

It helps write less repeated code and keeps styles organized.

Using SASS makes styling websites easier and faster.