SASS Introduction

SASS Features

$color: #333;

.nav {
  ul { margin: 0; }
}

@mixin button {
  padding: 10px;
}

@import 'colors';

🔹 Variables

SASS variables allow you to store reusable CSS values for consistent, maintainable code. Variables are declared using the $ symbol and can hold colors, sizes, fonts, and other CSS properties. For example, $primary-color: #3498db; defines a variable that you can use throughout your stylesheet by referencing $primary-color. This makes it easier to update styles globally—change the variable once, and all references automatically update, saving time and reducing errors across your entire project.

// SASS Variables
$primary-color: #e74c3c;
$secondary-color: #3498db;
$font-family: 'Arial', sans-serif;
$border-radius: 5px;

.card {
  background: $primary-color;
  color: white;
  font-family: $font-family;
  border-radius: $border-radius;
  padding: 20px;
}

.button {
  background: $secondary-color;
  border-radius: $border-radius;
  padding: 10px 20px;
}

.card {
  background: #e74c3c;
  color: white;
  font-family: 'Arial', sans-serif;
  border-radius: 5px;
  padding: 20px;
}

.button {
  background: #3498db;
  border-radius: 5px;
  padding: 10px 20px;
}

🔹 Nesting

SASS nesting allows you to nest CSS selectors in a way that follows the same visual hierarchy of your HTML. Instead of writing separate selectors for each element, you can nest child selectors within parent selectors using indentation. For example, you can write rules for .nav ul, .nav li, and .nav a all within the .nav block. This reduces code repetition, improves readability, and makes it easier to maintain related styles together in one logical structure.

// SASS Nesting
.navbar {
  background: #333;
  padding: 1rem;
  
  ul {
    list-style: none;
    margin: 0;
    
    li {
      display: inline-block;
      margin-right: 1rem;
      
      a {
        color: white;
        text-decoration: none;
        
        &:hover {
          color: #3498db;
        }
      }
    }
  }
}

.navbar {
  background: #333;
  padding: 1rem;
}

.navbar ul {
  list-style: none;
  margin: 0;
}

.navbar ul li {
  display: inline-block;
  margin-right: 1rem;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
}

.navbar ul li a:hover {
  color: #3498db;
}

🔹 Mixins

SASS mixins are reusable blocks of CSS declarations that accept parameters to generate styles dynamically. Mixins are defined using the @mixin keyword and can include any valid CSS properties with optional parameters. You can pass arguments to mixins to create flexible, parameterized styles that adapt to different use cases. For example, @mixin button-style($bg-color, $text-color) creates a reusable mixin that you can include in multiple selectors using @include button-style(#3498db, white). This eliminates code duplication, reduces maintenance overhead, and makes your stylesheets more scalable and DRY (Don't Repeat Yourself).

// SASS Mixins
@mixin button-style($bg-color, $text-color) {
  background: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.8;
  }
}

.primary-btn {
  @include button-style(#3498db, white);
}

.danger-btn {
  @include button-style(#e74c3c, white);
}

.primary-btn {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary-btn:hover {
  opacity: 0.8;
}

.danger-btn {
  background: #e74c3c;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.danger-btn:hover {
  opacity: 0.8;
}

🔹 Functions & Operations

SASS functions and operations allow you to perform calculations and manipulate values dynamically within your stylesheets. You can use mathematical operators like multiplication (*), division (/), addition (+), and subtraction (-) to calculate sizes and spacing based on variables. SASS also includes built-in functions like lighten(), darken(), and rgba() for advanced color manipulation. For example, padding: $base-size * 2 automatically calculates padding by multiplying a variable, and lighten($color, 20%) generates lighter color variations, making your styles more dynamic, flexible, and easier to maintain across your entire project.

// SASS Functions and Operations
$base-font-size: 16px;
$primary-color: #3498db;

.container {
  font-size: $base-font-size;
  padding: $base-font-size * 2; // 32px
  margin: $base-font-size / 2; // 8px
}

.header {
  background: lighten($primary-color, 20%);
  border: 1px solid darken($primary-color, 10%);
}

.text {
  font-size: $base-font-size * 1.5; // 24px
  color: rgba($primary-color, 0.8);
}

.container {
  font-size: 16px;
  padding: 32px;
  margin: 8px;
}

.header {
  background: #85c1e9;
  border: 1px solid #2e86c1;
}

.text {
  font-size: 24px;
  color: rgba(52, 152, 219, 0.8);
}

🔹 Partials & Import

SASS partials and the @import directive allow you to split your stylesheets into smaller, organized files for better code management and maintainability. Partials are SASS files prefixed with an underscore (e.g., _variables.scss, _mixins.scss), and you can import them into your main stylesheet using @import 'variables'; without the underscore or file extension. This modular approach keeps your code organized, improves readability, enables better team collaboration, and makes maintenance easier by separating concerns like colors, typography, mixins, and component styles into dedicated files. It's an essential practice for scalable, professional SASS projects.

// _variables.scss (partial file)
$primary-color: #3498db;
$font-size: 16px;
$border-radius: 5px;

// _mixins.scss (partial file)
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// main.scss (main file)
@import 'variables';
@import 'mixins';

.hero {
  @include flex-center;
  background: $primary-color;
  font-size: $font-size;
  border-radius: $border-radius;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3498db;
  font-size: 16px;
  border-radius: 5px;
}