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.

Variables

Syntax	Description
$variable-name: value;	Declares a variable with a value.
#{variable-name}	Interpolates a variable within a string.
!default	Sets a default value for a variable.
!global	Makes a variable available globally.

Data Types

Syntax	Description
null	Represents no value.
true/false	Represents boolean values.
number	Represents numeric values.
string	Represents text values.
list	Represents a collection of values.
map	Represents a collection of key-value pairs.

Operators

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

Control Directives

Syntax	Description
@if, @else if, @else	Conditional statements.
@for, @each, @while	Looping statements.
@mixin, @include	Reusable code blocks.
@extend	Inheritance of styles.

Functions

Syntax	Description
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.

Directives

Syntax	Description
@import	Imports other SCSS files.
@media	Applies styles based on media queries.
@font-face	Defines custom fonts.
@keyframes	Defines animations.
@supports	Applies styles based on feature support.

Miscellaneous

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

Reference

For more information on SCSS, please refer to the official documentation: https://sass-lang.com/documentation.