Sass CheatSheet

Are you a web developer looking to stay on top of your game? If so, then our Sass cheat sheet is the perfect tool for you! This comprehensive resource contains everything you need to know about Sass, including essential commands, functions, and variables. Whether you're a beginner just starting out with Sass or an experienced developer looking to improve your skills, our cheat sheet has got you covered.

With clear explanations and practical examples, our Sass cheat sheet is designed to help you streamline your workflow, increase your productivity, and master the art of Sass like a pro. From basic syntax to advanced features, this handy resource covers all the essential information you need to create beautiful, responsive websites that stand out from the crowd.

So why waste time scouring the web for answers when you can have all the information you need right at your fingertips? Download our Sass cheat sheet today and take your web development skills to the next level! With its attractive and professional design, it's the perfect reference guide for any developer who wants to stay ahead in the fast-paced world of modern web development.

Table of Content

# Getting started SASS

What is SASS ?

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

Sass stands for Syntactically Awesome Stylesheet

Sass is an extension to CSS

Sass is a CSS pre-processor

Sass is completely compatible with all versions of CSS

Sass reduces repetition of CSS and therefore saves time

Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006

Sass is free to download and use

SASS Advantages

  • Reduces the time to create and maintain CSS.
  • Sass allows us to have a modular organization of styles, which is vital for large projects.
  • It provides advanced structures typical of programming languages, such as variables, lists, functions, and control structures.
  • Sass allows to generate different types of output, compressed, normal or minimized, working both in development and in production, it is also effortless.
  • It allows us to watch the files in such a way that, if there has been a change in the style sheet, it is automatically regenerated (watch mode).
  • It has very few dependencies, especially the new version, which is dart-sass. In previous versions, it relied on many Ruby libraries and was a bit cumbersome to install, but with the new version, installation is easy.
  • There are many associated tools, many libraries made with Sass, and a critical community of users.

SASS Disadvantages

  • You have to learn to use a new tool, which, for some, is a disadvantage.
  • There is a consumption time in the CSS generation or compilation process, especially if the SCSS file is enormous. It is not a long time, but there is a slight delay.
  • It has a more complex syntax than CSS.

Types Of Syntax

Sass Syntax This syntax is a little different from the standard CSS syntax. It doesnt differ much. For example, it prevents you from putting semicolons at the end of property values. Also, the keys are not used and instead are made indented.

SCSS Syntax It is a syntax quite similar to the syntax of CSS itself. The CSS code is a valid SCSS code. We could say that SCSS is a CSS code with some extra things. In practice, although writing with Sass syntax might be faster, it is less recommended, because it takes you further away from the CSS language itself. Not only does it force you to learn more, but your code will be less like standard CSS, and therefore it is normal for you as a developer to feel less at home using Sass syntax. On the other hand, when you use SCSS, you have the advantage that your lifelong CSS code will be valid for the preprocessor, being able to reuse more your knowledge and possible style codes that you have been working with on projects.


$defaultColor: #e40000;
$defaultBackgroundColor: green;

a {
  color: $defaultColor;
  background-color: $defaultBackgroundColor;

String interpolation

$wk: -webkit-;

.rounded-box {
  #{$wk}border-radius: 4px;


 Block comments

// Line comments


@mixin heading-font {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;

h1 {
    @include heading-font;


.markdown-body {
    a {
      color: rgb(57, 57, 75);
      &:hover {
        color: rgb(255, 0, 0);

To Properties

text: {
    align: center;          // like text-align: center
    transform: uppercase;   // like text-transform: uppercase


.button {

.push-button {
    @extend .button;


@import './other_sass_file';
@import '/code', 'lists';

// Plain CSS @imports
@import "yourcssfile.css";
@import url(yourcssfile);

# Sass Mixins


@mixin font-size($n) {
    font-size: $n * 1.2em;

body {
    @include font-size(2);

Default values

@mixin pad($n: 10px) {
    padding: $n;

body {
    @include pad(15px);

Default variable

$default-padding: 10px;

@mixin pad($n: $default-padding) {
    padding: $n;

body {
    @include pad(15px);

# Color functions in SASS


rgb(100, 120, 140)

rgba(100, 120, 140, .5)

rgba($color, .5)


mix($a, $b, 10%)   
// Result: 10% a, 90% b

Modifying HSLA

darken($color, 5%)
lighten($color, 5%)

saturate($color, 5%)
desaturate($color, 5%)

adjust-hue($color, 15deg)
complement($color)    // like adjust-hue(_, 180deg)

fade-in($color, .5)   // aka opacify()
fade-out($color, .5)  // aka transparentize()
rgba($color, .5)      // sets alpha to .5

Getting individual values

hue($color)         // 0deg..360deg
saturation($color)  // 0%..100%
lightness($color)   // 0%..100%
alpha($color)       // 0..1 (aka opacity())

// RGB
red($color)         // 0..255


// Changes by fixed amounts
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%) // darken(_, 30%)
adjust-color($color, $alpha: -0.4)     // fade-out(_, .4)
adjust-color($color, $hue: 30deg)      // adjust-hue(_, 15deg)

// Changes via percentage
scale-color($color, $lightness: 50%)

// Changes one property completely
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)

# Sass Other functions




str-length(hello world)
str-slice(hello, 2, 5)     // "ello" - it's 1-based, not 0-based
str-insert("abcd", "X", 1) // "Xabcd"


unit(3em)        // 'em'

unitless(100px)  // false



min(1, 2, 3)
max(1, 2, 3)

percentage(.5)   // 50%
random(3)        // 0..3


variable-exists(red)    // checks for $red
mixin-exists(red-text)  // checks for @mixin red-text


selector-append('.menu', 'li', 'a')   // .menu li a
selector-nest('.menu', '&:hover li')  // .menu:hover li

# Sass Feature checks

Feature check



  • global-variable-shadowing
  • extend-selector-pseudoclass
  • units-level-3
  • at-error

# Loops in SASS

For loops

@for $i from 1 through 4 {
    .item-#{$i} { left: 20px * $i; }

Each loops (simple)

$menu-items: home about contact;

@each $item in $menu-items {
    .photo-#{$item} {
      background: url('#{$item}.jpg');

Each loops (nested)

$backgrounds: (home, 'home.jpg'),
              (about, 'about.jpg');

@each $id, $image in $backgrounds {
    .photo-#{$id} {
      background: url($image);

While loops

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

# SASS Other features


@if $position == 'left' {
     position: absolute;
     left: 0;
@else if $position == 'right' {
     position: absolute;
     right: 0;
@else {
     position: static;


.#{$klass} { ... }      // Class
call($function-name)    // Functions

@media #{$tablet}
font: #{$size}/#{$line-height}


$list: (a b c);

nth($list, 1)  // starts with 1

@each $item in $list { ... }


$map: (key1: value1, key2: value2, key3: value3);

map-get($map, key1)

Best Suggest