SCSS Cheat Sheet


SCSS, or Sassy CSS, is a preprocessor scripting language that extends the capabilities of CSS. It allows developers to write CSS code in a more efficient and organized way, making it easier to maintain and update. SCSS is a superset of CSS, meaning that any valid CSS code is also valid SCSS code.

With SCSS you can use variables, which can be defined and reused throughout the code. This makes it easier to make global changes to the design, as you only need to update the variable once and it will be reflected throughout the entire codebase.

Another useful feature of SCSS is nesting, which allows developers to group related styles together. This makes the code more readable and easier to understand, as it clearly shows the hierarchy of the styles.

SCSS also supports mixins, which are reusable blocks of code that can be included in other styles. This can save a lot of time and effort, as developers can create complex styles once and reuse them throughout the codebase.

This cheat sheet provides an extensive list of SCSS features and their descriptions.


$variable-name: value;Declares a variable with a value.
#{variable-name}Interpolates a variable within a string.
!defaultSets a default value for a variable.
!globalMakes a variable available globally.

Data Types

nullRepresents no value.
true/falseRepresents boolean values.
numberRepresents numeric values.
stringRepresents text values.
listRepresents a collection of values.
mapRepresents a collection of key-value pairs.


+, -, *, /, %Basic arithmetic operators.
==, !=, <, >, <=, >=Comparison operators.
and, or, notLogical operators.
(), []Parentheses and brackets for grouping and indexing.

Control Directives

@if, @else if, @elseConditional statements.
@for, @each, @whileLooping statements.
@mixin, @includeReusable code blocks.
@extendInheritance of styles.


rgb(), rgba(), hsl(), hsla()Color functions.
lighten(), darken(), saturate(), desaturate()Color manipulation functions.
percentage(), round(), ceil(), floor()Numeric functions.
unquote(), quote(), to-upper-case(), to-lower-case()String functions.
map-get(), map-merge(), map-remove(), map-keys()Map functions.


@importImports other SCSS files.
@mediaApplies styles based on media queries.
@font-faceDefines custom fonts.
@keyframesDefines animations.
@supportsApplies styles based on feature support.


//Single-line comments.
/* */Multi-line comments.
&Parent selector reference.
#{$variable-name}Interpolates a variable within a selector.
@debugOutputs a value to the console.
@warnOutputs a warning message.
@errorOutputs an error message and stops compilation.


For more information on SCSS, please refer to the official documentation:

# #