SCSS cheatsheet

Complete SCSS Cheatsheet

Why we need SCSS Cheatsheet?

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world used by n number of users. Cheat sheets are very useful when we need to get quick help while coding and every programmer likes to keep some helpful cheat sheets by his/her side. This SCSS cheatsheet cover all most used features of

What is SCSS?

SCSS simply means Sassy CSS. which is also known as a CSS preprocessor that gives you access to use features that are not available in Vanilla(normal) CSS.
In this article I will list, explain and give Examples of some of those features.

You can visit SCSS official site to learn in detail about all features,

What is the difference between CSS and SCSS ?

  1. SCSS contains all the features of CSS and it contains more features that are not present in CSS which makes it a good choice for developers to use it.
  2. The SCSS is full of advanced features.
  3. SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.
SCSS cheatsheet

Advantages of SCSS over CSS || SCSS Cheatsheet

  1. SCSS helps you to easily customize many external libraries like Bootstrap 
  2. SASS adds the feature of @import which lets you import your customized SCSS files.
  3. SASS allows us to use nested syntax. 
  4. SCSS help you to manage your whole project theme and easily customize it by changing variables.
  5. Operations and Functions

Features of SCSS || SCSS Cheatsheet

In this SCSS cheatsheet, I try to cover all most popular features which help to you in your next project.

1. Variables

In SCSS you can declare variables easily. To create a variable just add a $sign to the variable name and set them like a normal CSS property.

// CSS

body{
 color: #ffffff;
 font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
 font-size: xx-large;
 padding: 2rem;
}
// SCSS

$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

body{
 color: $white;
 font: $ubuntu-font;
 font-size: xx-large;
 padding: 2rem;
}

2. Nesting

SCSS allows you to nest CSS rules

// CSS

.container {
  Width: 100%;
  Color: grey;
  Background-color: green;
}
.container div {
  Border: 1px solid black;
}
.container div a {
  text-decoration: none;
  color: #f2f2f2;
}
.container div a::hover {
  color: #b2b2b2;
}
// SCSS

.container {
  width: 100%;
  color: grey;
  background-color: green;

  div {
    border: 1px solid black;

    a {
      text-decoration: none;
      color: #f2f2f2;
      &::hover {
        color: #b2b2b2;
      }
    }
  }
}

3. Inheritance(Using @extend or @mixin)

@extend

@extends helps you inherit the properties of another class.

// SCSS

.header {
  color: grey;
}

.sub-header {
  @extend .header;
  font-size: 40px;
}

Below is what the SCSS compiles to

// CSS

.header, .sub-header {
  color: grey;
}

.sub-header {
  font-size: 40px;
}

@mixin

Mixin is another way SCSS implement inheritance using @mixin. You can achieve the same effects of @extend using mixin. You first create the mixin using @mixin then add it to any class that needs that property using @include

// SCSS

@mixin red-color{
  color: grey;
}

.header{
  @include red-color;  /* add mixin */
}

.sub-header{
  @include red-color;
  font-size: 40px;
}

// CSS

.header {
  color: grey;
}

.sub-header {
  color: grey;
  font-size: 40px;
}
Difference between @extend and @mixin

@mixin puts the style in both selectors(header and sub-header) while @extend seperates both seletors with a comma and then apply this style to them. There is one thing though @mixin can do that @extend cannot, That is pass parameters and use it. @mixin can also take default values for the parameter.

// SCSS

@mixin fontSize ($params: 10px){
  font-size: $params;
}

.header{
  @include fontSize(20px);
}

.sub-header{
  @include fontSize(20px);
}
// CSS

.header {
  font-size: 20px;
}

.sub-header {
  font-size: 20px;
}

@import

SCSS allow you to import other SCSS stylesheet into a SCSS file using @import

// SCSS

@import “button.scss” or @import “button”

4. Partials

Partials are SCSS files you don’t what to be compiled to CSS but you want to import them(using @import) into another file. To create a partial you just need to add an underscore to the beginning of the file name. like _font.scss

/* _colors.scss(partial) */

$light-gray: #F2F2F2
$dark-gray: #737373
/*EOF colors.scss*/

/* _buttons.scss(partial) */

.button-primary{
  color: #4c7396;
  background-color: #ffffff;
}
.button-secondary{
  background: #4c7396;
  color: #FFFFFF;
}
/*EOF buttons.scss*/

/* main.scss */
@import "_buttons.scss"
@import "_colors.scss"

5. Operators

SCSS offers you different kind of operators that you can use in your CSS. This SCSS cheatsheet contains following known operators widely used.

  • Addition(+)
  • Subtraction(-)
  • Division(/)
  • Multiplication(*)
  • Remainder(%)

Addition and Subtraction
The following are valid operations for addition and subtraction.


   .header-small {
       /*addition*/
       font-size:  24px + 2px; 
       width: 4em + 2; 

       /*subtraction*/        
       height: 12% - 2%;
       margin: 4rem - 1;
   }

This is compiled to


    .box-small {
        /*addition*/
        font-size: 26px;
        width: 6em;

        /*subtraction*/
        height: 10%;
        margin: 3rem; }

Notice that the values either have the same units or one has no unit at all. The value that has a unit should be on the left-hand side of the operator i.e. it should come first. Let’s try to use different units and see the result.


    .box-big {
        font-size:  22px + 4em; // Error: Incompatible units: 'em' and 'px'.
        width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
    }

We’ll get errors in both cases. It is also possible to add and subtract colors. Here’s an example.

    $primaryColor: #202020;

    .box {
        background-color: $primaryColor + #123456;
        color: $primaryColor - #100110;
    }

This is compiled to

   .box {
       background-color: #325476;
       color: #101f10; }

How does this work? Sass performs operations on each corresponding part of the RGB color code. So in the addition part of our code above, here’s what happened.

    20+12=32(red color) 20+34=54(green color) 20+56=76(blue color)

If you add two color values and it’s more than the color range, the result will be the last value on the color range which is #FFFFFF. Similarly, if you subtract more than the color range, you’ll get #000000.

Multiplication
In Sass, the multiplication operator is used in the same way as the addition and subtraction only that one value must not have a unit. So here, the code below results to valid CSS when compiled.

 .box-small {
     height: 16px * 4;
 }

Its CSS is

   .box-small {
       height: 64px; }

While this one results in an error.

    .box-small {
        height: 16px * 4px; //Error: 64px*px isn't a valid CSS value.
    }

Division

If we use the / operator without putting the values in brackets, it is taken as the normal use of the forward slash in CSS and no operation is carried out. Look at the example below.

   .box-medium {
        font-size: 30px / 5px;
        width:  24px/ 4;

    }

This is compiled to


   .box-medium {
       font-size: 30px / 5px;
       width: 24px/ 4; }

No difference because it is taken as normal CSS. So to make SCSS do the calculations, we put our values in brackets.


    .box-medium {
        font-size: (30px / 5px);
        width:  (24px/ 4);

    }

This will compile to

   .box-medium {
       font-size: 6;
       width: 6px; }

The operations are carried out. Note that if you are using the / without putting the values in brackets, you can use different units but when they are in brackets, you can only use similar units or no unit on one value.

The remainder operator is used in the same way as the addition and subtraction operators. Next, let’s consider another use of the + operator.

String Operations || SCSS Cheatsheet

The + operator can be used to concatenate strings i.e join two strings together. Some things to note are:

  1. If a string with quotes comes before a string without quotes, the resulting string is quoted.
  2. If a string without quotes comes before a string with quotes, the result is a string without quotes.

Let’s use examples to prove this.

// SCSS
  
 p:before {
       content: "I am a string with" +quotes;
       font: Arial + ", sans-serif";
   }

This is compiled to

// CSS

   p:before {
       content: "I am a string withquotes";
       font: Arial, sans-serif; }

When used with Mixins, it is quite interesting. Here’s an example.

    @mixin introduction($name) {
        &:before {
            content: "I'm a supercool person called " +$name;
        }
    } 

    p {
        @include introduction(Sarah);
    }

This is compiled to

   p:before {
       content: "I'm a supercool person called Sarah"; }  

Just like you can do with other programming languages. Let’s consider other operators next.

Comparison Operators || SCSS Cheatsheet

There are operators that can be used to compare one value to another in Sass. They are:

OperatorConditionsDescription
==x == yreturns true if x and y are equal
!=x != yreturns true if x and y are not equal
>x > yreturns true if x is greater than y
<x < yreturns true if x is less than y
>=x >= yreturns true if x is greater than or equal to y
<=x <= yreturns true if x is less than or equal to y

This comparison can be used to help Sass make decisions. Here’s an example.


    @mixin spacing($padding, $margin) {
        @if ($padding > $margin) {
            padding: $padding;
        } @else {
            padding: $margin;
        }  
    }

    .box {
        @include spacing(10px, 20px);
    }

This is compiled to

    .box {
        padding: 20px; }

In the above example, we used the > operator to test if the given padding is greater than the margin. The value of the padding is then set based on the return value. The other comparison operators can be used in the same way. Let’s move to the final set of operators.

Logical Operators

The logical operators are:

OperatorConditionsDescription
andx and yreturns true if x and y are true
orx or yreturns true if x or y is true
notnot xreturns true if x is not true

Let’s use an example to explain how they can be used. We are going to use a logical operator to decide which background color should be applied to a button.

    @mixin button-color($height, $width) {
        @if(($height < $width) and ($width >=35px)) {
            background-color: blue;
        } @else {
            background-color: green;
        }       
    }

    .button {
        @include button-color(20px, 30px)
    }

This is compiled to

.button { background-color: green; }

The background-color is set to green because both conditions are not met. If or was used, it would have been set to blue because at least one condition is met.

Color Functions

Scss provides some function that can be used to manipulate colors. Some of them include:

  • mix($colorX, $colorY, weight) : This function is used to mix two color together. First argument is the first color, second is the second color and the third argument is the percentage of first color you want to mix.
mix(blue, grey, 30%) /*results 30% blue and 70% grey*/
  • lighten($color, $amount): this function is used to return a lighter color. The first argument is the color and the second is the percentage of how much you want to lighten it.
lighten(#ff0000, 30 ) /*results #ff9999/*
  • darken($color, $amount): Takes similar arguments as lighten function but this returns a darker color specified.
darken(#ff0000, 30 ) /*results #660000*/
  • opacify($color, $amount): This function returns a color with the opacity increase. The first argument is the color and the second is value between 0 and 1.
  • transparentize($color, $amount): This function makes a color more transparent, it takes similar arguments to opacify. It returns a color with the opacity reduced. You can say it is the opposite of opacify.

Other functions

Scss still offers other functions that might be useful to you

  • str-length($string): This function returns the number of characters in a string.
  • percentage($number): This percentage function converts number without unit to a percentage.
  • round($number): This function rounds a number to the nearest whole number.
  • min($number1, $number2, $number3, …..): this function returns the minimum value from a set of numbers.
  • random(): This returns a random number and takes no arguments.
  • quote($string): This function adds quotes to a string.
  • unquote($string): This unquote function removes quotes from a string.
  • to-lower-case($string): This function converts a string to lowercase.
  • to-upper-case($string): This function converts a string to uppercase.

Loops

This can be really useful in creating utility class. You can create classes for your color, font-size , margin , padding and a lot of other properties.

/* Generate utility classes for font-size */

@for $x from 1 through 70 {
  .font-size-#{$x} {
    font-size: 0px + $x;
  }
}

So I can easily have a class of font-size-20 if I need that on an element.

/* Generate utility classes for margin */

@for $i from 0 through 500 {
  .m#{$i} {
    margin: 0px + $i;
  }
  .mt#{$i} {
    margin-top: 0px + $i;
  }
  .mb#{$i} {
    margin-bottom: 0px + $i;
  }
  .ml#{$i} {
    margin-left: 0px + $i;
  }
  .mr#{$i} {
    margin-right: 0px + $i;
  }
}

Conditionals

Another awesome feature of scss is the ability to use If/else statements in css.

$bg: pink;
$bg-mobile: red;

p {
  @if $bg == pink {
    color: blue;
  } @else if $bg-mobile == red {
    color: green;
  } @else {
    color: grey;
  }
}

These are all the most used functions in this SCSS cheatsheet. I hope this SCSS cheatsheet help you in your next project. Comment your thoughts about this complete SCSS cheatsheet below which help to to improve this SCSS cheatsheet.

Thanks to these authors for their research which me to complete this SCSS cheatsheet.

  • Nero Adaware ( https://dev.to/finallynero/scss-cheatsheet-7g6 )
  • Sarah Chima (https://dev.to/sarah_chima/sass-operators-56f)

Sujit Biswas

Innovative Front End Developer with 2 years experience building and maintaining responsive websites in the recruiting industry. Proficient in HTML, CSS, jQuery, JavaScript and Vue; plus modern libraries and frameworks. Passionate about usability and possess working knowledge of Adobe Photoshop & Sketch

Leave a Reply

Your email address will not be published.

Previous Story

Gradient Descent v/s Normal Equation

Next Story

Logistic Regression from Scratch with Only Python