SASS (SCSS) Cheatsheet

SASS or Syntactically Awesome Stylesheets is a CSS preprocessor that gives you the ability to write more manageable and clean CSS code having abilities like variables, nesting, and mixins. Which is its syntax variant more like that of standard CSS, only with additional features that enhance and make stylesheets more efficient.

Variables

Variables store reusable values like colors, font sizes, and spacing. They help maintain consistency and make updates easier.

$primary-color: #333;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

Nesting

SASS allows the nesting of selectors to reflect HTML structure. This improves readability and organization in stylesheets.

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Comments

SASS supports both block (/* */) and line (//) comments. Block comments appear in the output, while line comments do not.

/* Block comment */
body {
  color: #333;
}

// Line comment

Mixins

Mixins allow reusable chunks of CSS with parameters. They help reduce code repetition and enable dynamic styling.

Basic Mixin

Defines reusable styles that can be included anywhere. Useful for properties like border-radius or box-shadow.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

Mixin with Parameters

Accepts arguments to apply dynamic values. It enhances flexibility and customization for different elements.

@mixin font-size($size) {
  font-size: $size;
}

body {
  @include font-size(16px);
}

Extend

Allows sharing styles between selectors using @extend. This reduces redundancy and maintains consistency.

.button {
  background: blue;
}

.primary-button {
  @extend .button;
}

Import and Use

@use and @import help modularize styles by including external SASS files. This improves maintainability.

@use 'styles/colors'; // Imports and loads a Sass file

Color Functions

Modify colors using built-in functions like lighten(), darken(), and rgba(). Useful for theme customization.

$color: rgb(100, 120, 140);
$translucent-color: rgba($color, 0.5);
$light-blue: lighten($color, 10%);
$dark-blue: darken($color, 10%);

Math Functions

Perform calculations within SASS using +, -, *, and /. Useful for dynamic layouts and sizing.

$width: 100px + 20px; // 120px
$half-width: $width / 2;
$perimeter: 2 * ($width + $height);

Strings and Variables

Manipulate text using functions like to-upper-case(). Useful for defining and formatting content dynamically.

$greeting: "Hello, world!";
$uppercase: to-upper-case($greeting); // "HELLO, WORLD!"

Lists and Maps

Store multiple values in a structured format. Lists are ordered, while maps store key-value pairs for styling.

List

Hold multiple values in a sequence. Used in loops to apply styles dynamically.

$colors: red, green, blue;
@each $color in $colors {
  .#{$color}-text {
    color: $color;
  }
}

Map

Define key-value pairs for structured styling. Ideal for color themes and design systems.

$color-map: (color1: red, color2: blue);
@each $key, $color in $color-map {
  .#{$key}-text {
    color: $color;
  }
}

Conditionals

Conditionals are used for the flow control of styling using if else conditions.

@mixin border-style($val) {
    @if $val == light {
        border: 1px solid black;
}
    @else if $val == medium {
    border: 3px solid black;
}
@else {
    border: none;
    }
}
.box {
    @include border-style(medium);
}

Loops

Iterate over lists or numbers to generate styles dynamically. Saves time and reduces manual repetition.

@for Loop

Runs a loop for a specific range, useful for grid layouts and responsive designs.

@for $i from 1 through 5 {
  .col-#{$i} {
    width: 100% / 5 * $i;
  }
}

@each Loop

Iterates over lists or maps to apply styles based on predefined values.

@each $item in red, green, blue {
  .#{$item}-text {
    color: $item;
  }
}

@while Loop

Repeats a block of code while a condition is true. Useful for dynamic calculations.

$i: 10;
@while $i > 0 {
  .item-#{$i} {
    width: $i * 10px;
  }
  $i: $i - 2;
}

Functions

Retrieve values like lightness(), red(), and rgba(). Helps in color manipulation and style adjustments.

$color: rgba(100, 150, 200, 0.7);
red($color); // Returns the red component of the color
lightness($color); // Returns lightness of the color

Media Queries

Use variables for breakpoints and responsive design. Allows dynamic scaling for different screen sizes.

$tablet: 768px;
@media (max-width: $tablet) {
  body {
    font-size: 14px;
  }
}

Selector Interpolation

Dynamically generate class names using variables. Useful for dynamic styling in component-based designs.

$color: red;
.#{$color}-text {
color: $color;
}

Partials and Importing Files

Use partials to split your styles into smaller chunks:

// _colors.scss
$primary-color: #333;

// styles.scss
@use 'colors';
body {
  color: colors.$primary-color;
}

Inheritance (@extend)

Allows one class to inherit styles from another. Reduces duplication and ensures consistency.

Feature	Description	Code Example
Basic @extend	Reuse styles from another selector.	.button { background: blue; color: white; } .btn-primary { @extend .button; }
Inheritance with Class	Reuse the styles in another class.	.card { border: 1px solid #ccc; padding: 10px; } .info-card { @extend .card; }

Nested Selectors

Improve code organization by nesting selectors within parent elements.

Feature	Description	Code Example
Basic Nesting	Nest selectors inside others to represent parent-child relationships.	.nav { ul { list-style-type: none; } li { display: inline-block; } }
Nested with Pseudo-Classes	Nest selectors for pseudo-classes or pseudo-elements.	.button { &:hover { background: green; } &:active { background: darkgreen; } }

SASS Variables for Reusability

Define and reuse values for colors, fonts, and spacing. Helps maintain design consistency.

Feature	Description	Code Example
Defining Variables	Store values for colors, sizes, etc.	$primary-color: blue; $font-size: 16px;
Using Variables	Reuse defined variables throughout the stylesheet.	body { color: $primary-color; font-size: $font-size; }

SASS Built-in Functions

Perform operations like color manipulation and value conversions.

Function	Description	Code Example
`rgb()`	Converts values to an rgb() color format.	$color: rgb(255, 0, 0);
`hsla()`	Converts values to an hsla() color format.	$color: hsla(0, 100%, 50%, 1);
`lighten()`	Lightens a color by a given percentage.	$light-blue: lighten($primary-color, 20%);
`darken()`	Darkens a color by a given percentage.	$dark-blue: darken($primary-color, 20%);
`mix()`	Mixes two colors with a specified weight.	$purple: mix($blue, $red, 50%);
`percentage()`	Converts a value to percentage.	$width: percentage(0.5);

@mixin and @include

Create reusable style blocks and apply them dynamically.

Feature	Description	Code Example
Defining a Mixin	Define reusable styles with parameters.	@mixin button($color) { background: $color; color: white; padding: 10px; }
Including a Mixin	Reuse the defined mixin with specific parameters.	.btn-primary { @include button(blue); } .btn-secondary { @include button(green); }

Partials and Importing

Break styles into modular files for better organization.

Feature	Description	Code Example
Creating a Partial	Split styles into separate files using `_` before the filename.	// _buttons.scss .button { padding: 10px; background: blue; color: white; }
Importing Partials	Use @import to bring in partials into the main stylesheet.	@import 'buttons';

SASS Maps

Store key-value pairs for better structure and efficiency.

Feature	Description	Code Example
Defining a Map	Define a map with key-value pairs.	$colors: (primary: blue, secondary: green);
Accessing Map Values	Access values from a map using the `map-get()` function.	$primary-color: map-get($colors, primary);
Looping Through Maps	Iterate over map keys and values.	@each $key, $value in $colors { .#{$key} { color: $value; } }

SASS Flow Steps

Defines structured steps for organizing styles and improving workflow efficiency.

Step	Description	Code Example
1. Variables	Define reusable values like colors, fonts, etc.	$primary-color: blue;
2. Inheritance (@extend)	Reuse styles with inheritance.	.btn { @extend .button; }
3. Mixins	Define reusable chunks of styles using @mixin and @include.	@mixin button($color) { background: $color; } @include button(blue);

Print Page