First SASS stylesheet

Introduction

SASS helps you write CSS faster and cleaner by using simple shortcuts.

You want to organize your styles with variables for colors or fonts.

You want to avoid repeating the same CSS code many times.

You want to nest styles to match your HTML structure.

You want to use math or logic in your styles easily.

You want your CSS to be easier to maintain and update.

Syntax

SASS

$variable-name: value;

selector {
  property: value;
  nested-selector {
    property: value;
  }
}

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

You can nest selectors inside others to keep related styles together.

Examples

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

SASS

$main-color: #3498db;

body {
  background-color: $main-color;
}

Nesting ul and li inside nav matches the HTML structure.

SASS

nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}

You can do math with variables, like doubling the padding.

SASS

$padding: 1rem;

.container {
  padding: $padding * 2;
}

Sample Program

This SASS stylesheet sets a green background and padding for a container. It styles the heading and paragraph inside with lighter and darker shades of the main color.

SASS

@use 'sass:color';

$primary-color: #2ecc71;
$padding: 1.5rem;

.container {
  background-color: $primary-color;
  padding: $padding;
  border-radius: 0.5rem;

  h1 {
    color: color.scale($primary-color, $lightness: 40%);
    font-size: 2rem;
  }

  p {
    color: color.darken($primary-color, 20%);
    font-size: 1rem;
  }
}

Important Notes

To see your SASS styles in the browser, you must compile the SASS file into CSS first.

Use tools like sass command line or online compilers to convert SASS to CSS.

Keep your variable names clear and consistent for easier updates.

Summary

SASS lets you write CSS with variables and nesting for cleaner code.

Variables store values like colors and sizes to reuse easily.

Nesting selectors matches your HTML structure and keeps styles organized.