Sass Cheat Sheet

In CSS, Sass

Sass, or Syntactically Awesome Style Sheets, is a preprocessor scripting language that is used to simplify the process of writing CSS. It was created by Hampton Catlin in 2006 and has since become a popular tool among web developers.

Sass allows developers to write CSS in a more efficient and organized way. It offers features such as variables, nesting, mixins, and functions, which can help reduce the amount of code needed to create complex styles. For example, instead of writing out the same color value multiple times, a developer can define a variable for that color and use it throughout the stylesheet.

Another benefit of Sass is its ability to use mathematical operations, making it easier to create responsive designs. Sass also allows for the creation of reusable code through mixins, which are groups of CSS declarations that can be included in multiple stylesheets.

This cheat sheet provides an overview of the most commonly used features in Sass. For more detailed information, please refer to the official Sass documentation.


$variable-name: value;Declares a variable with a value
#{variable-name}Interpolates a variable within a string

Data Types

NumberNumeric values
StringText values
Booleantrue or false
NullRepresents the absence of a value
ListA collection of values
MapA collection of key-value pairs


<Less than
>Greater than
<=Less than or equal to
>=Greater than or equal to
andLogical AND
orLogical OR
notLogical NOT

Control Directives

@ifConditionally executes code
@elseExecutes code if the @if condition is false
@forLoops through a range of values
@eachLoops through a list
@whileLoops while a condition is true


rgb()Creates a color using RGB values
rgba()Creates a color using RGB values with an alpha channel
hsl()Creates a color using HSL values
hsla()Creates a color using HSL values with an alpha channel
lighten()Lightens a color by a percentage
darken()Darkens a color by a percentage
saturate()Increases the saturation of a color by a percentage
desaturate()Decreases the saturation of a color by a percentage
mix()Mixes two colors together
round()Rounds a number to the nearest whole number
ceil()Rounds a number up to the nearest whole number
floor()Rounds a number down to the nearest whole number


@mixin mixin-name($parameter1, $parameter2) { ... }Declares a mixin with parameters
@include mixin-name(value1, value2)Includes a mixin with values for the parameters


@extend selectorInherits styles from another selector


@import ""file""Imports a Sass file


// CommentSingle-line comment
/* Comment */Multi-line comment


# #