Sass Cheat Sheet

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.

Variables

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

Data Types

Type	Description
Number	Numeric values
String	Text values
Boolean	true or false
Null	Represents the absence of a value
List	A collection of values
Map	A collection of key-value pairs

Operators

Operator	Description
+	Addition
-	Subtraction
*	Multiplication
/	Division
%	Modulo
==	Equality
!=	Inequality
<	Less than
>	Greater than
<=	Less than or equal to
>=	Greater than or equal to
and	Logical AND
or	Logical OR
not	Logical NOT

Control Directives

Directive	Description
@if	Conditionally executes code
@else	Executes code if the @if condition is false
@for	Loops through a range of values
@each	Loops through a list
@while	Loops while a condition is true

Functions

Function	Description
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

Mixins

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

Inheritance

Syntax	Description
@extend selector	Inherits styles from another selector

Importing

Syntax	Description
@import ""file""	Imports a Sass file

Comments

Syntax	Description
// Comment	Single-line comment
/* Comment */	Multi-line comment

References

• Sass Documentation