Bootstrap - What is SASS

1. What is SASS?

SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor. It adds extra features to CSS like:

  • Variables

  • Nesting

  • Mixins (reusable blocks)

  • Functions

  • Partials & imports

  • Inheritance

SASS makes CSS more organized and maintainable.

2. Installing SASS

You can use SASS in two main ways:

a) Using npm (Node.js required)

npm install -g sass

Then compile SCSS to CSS:

sass style.scss style.css

b) Using a GUI or online compiler

  • Tools like CodePen, JSFiddle, or Prepros allow SASS compilation automatically.

3. SASS Syntax

There are two syntaxes:

  1. SCSS (Sassy CSS) – Most used

    • Similar to CSS, uses {} and ;

    • File extension: .scss

$primary-color: #3498db;

body {
  color: $primary-color;
  font-family: Arial, sans-serif;
}

  1. Indented Syntax (older)

    • Uses indentation instead of braces

    • File extension: .sass

$primary-color: #3498db

body
  color: $primary-color
  font-family: Arial, sans-serif

We’ll focus on SCSS because it’s widely used.

4. Key Features of SASS

a) Variables

Store reusable values:

$primary-color: #3498db;
$padding: 10px;

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

b) Nesting

Nest CSS selectors inside each other:

nav {
  background: #333;
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

✅ Makes CSS cleaner and mirrors HTML structure.

c) Partials & Import

Split CSS into multiple files using _filename.scss and import:

// _variables.scss
$primary-color: #3498db;

// style.scss
@import 'variables';

body {
  color: $primary-color;
}

d) Mixins

Reusable chunks of CSS with optional parameters:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 200px;
  background: #f0f0f0;
}

e) Inheritance / Extend

Share styles between selectors:

.button {
  padding: 10px 20px;
  border-radius: 5px;
}

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

f) Functions

Perform operations:

@function double($number) {
  @return $number * 2;
}

.box {
  width: double(50px);  // 100px
}

5. Example: Complete SCSS

$primary-color: #3498db;
$secondary-color: #2ecc71;
$padding: 15px;

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  font-family: Arial, sans-serif;
  background: #f9f9f9;
}

nav {
  background: $primary-color;
  padding: $padding;
  ul {
    list-style: none;
    display: flex;
    li {
      margin-right: 20px;
      a {
        color: white;
        text-decoration: none;
        &:hover {
          color: $secondary-color;
        }
      }
    }
  }
}

.button {
  @include flex-center;
  padding: $padding;
  border-radius: 5px;
  background: $secondary-color;
  color: white;
  cursor: pointer;
}

  •