DEV Community

loading...
Cover image for SCSS Cheatsheet

SCSS Cheatsheet

finallynero profile image Nero Adaware ・5 min read

What is SCSS

SCSS simply means Sassy CSS. Sassy CSS is 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.

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.

// Font-weight for a project

$font-light : 400
$font-thick: 500
$font-heavy: 600

.element{
    Font-weight: $font-light;
}

//color palette for a project to maintain consistency

$product-dark-blue: #324e85
$product-light-blue:#4c7396
$product-lighter-blue:#9bb7cf

.element{
    color: $product-dark-blue;
}


Enter fullscreen mode Exit fullscreen mode

Nesting

SCSS allows you to nest CSS rules

// vanilla 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;
}

Enter fullscreen mode Exit fullscreen mode
// SCSS

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

  div {
    border: 1px solid black;

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


Enter fullscreen mode Exit fullscreen mode

Sassy isn't It? SCSS helps you write cleaner and concise CSS.

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;
}
Enter fullscreen mode Exit fullscreen mode

Below is what the SCSS compiles to


// Compiled CSS

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

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


Enter fullscreen mode Exit fullscreen mode
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

//create mixin
@mixin red-color{
  color: grey;
}

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

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

Enter fullscreen mode Exit fullscreen mode
.header {
  color: grey;
}

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

Enter fullscreen mode Exit fullscreen mode

Can you see the different between the compiled css of @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);
}

Enter fullscreen mode Exit fullscreen mode
// Compiled CSS
.header {
  font-size: 20px;
}

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

Enter fullscreen mode Exit fullscreen mode

You can use any of them if you need to inherit a class but the best practice according to CSS tricks is to use @extend when you are not passing parameters.

Import

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

@import button.scss or @import button
Enter fullscreen mode Exit fullscreen mode

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 _font.scss, then you can import them with or without the underscore.
Partials helps to modularize your code and separate concerns.
For example in my projects I partials for colors, fonts, buttons e.t.c then I import them into a main.scss file.

/* _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"

Enter fullscreen mode Exit fullscreen mode

Operators

Scss offers you different kind of operators that you can use in your CSS. Arithmetic operators like :

  • Addition(+)
  • Subtraction(-)
  • Division(/)
  • Multiplication(*) e.t.c

// SCSS
@mixin top-margin ($margin){
  margin-top: 30px + $margin;
}

.container{
  width: 800px - 80px;
  @include top-margin(10px);
}

//Compiled CSS

.container {
  width: 720px;
  margin-top: 40px;
}


Enter fullscreen mode Exit fullscreen mode

Note that arithmetic operators only work when both values use the same unit i.e rem, em, px

They also support comparison operators like ==, !=, <, >, >=, <= and logical operators and, or, not.

You can check out this article for more on Operators

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*/
Enter fullscreen mode Exit fullscreen mode
  • 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/*
Enter fullscreen mode Exit fullscreen mode
  • darken($color, $amount): Takes similar arguments as lighten function but this returns a darker color specified.
darken(#ff0000, 30 ) /*results #660000*/
Enter fullscreen mode Exit fullscreen mode
  • 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.

These are just some of the color functions available in Scss, you can check the docs for more.

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

We can use for loops in our css thanks again to Scss. 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.

Below are some examples of loops I used to create utility classes in my projects

/* Generate utility classes for font-size */

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


Enter fullscreen mode Exit fullscreen mode

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;
  }
}


Enter fullscreen mode Exit fullscreen mode

If you have used loops to create utility classes in your projects please share in the comments so others can adopt them. Loops are like my favorite scss feature

Conditionals

Another awesome feature of scss is the ability to use If/else statements in css. I have not really used this feature in any of my projects but I think they are awesome.

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

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

This is just a simple use case for if else statements, if you have used it in a project please share a code snippet in the comment.

Scss has a lot more features than what is covered in this article but these are the commonly used ones. You can check out their docs.

Discussion (8)

pic
Editor guide
Collapse
lawrencejohnson profile image
Lawrence

These utility classes create a system that is no different than inlining css. If you have to add a class like font-size-20 to every element that you want 20px, you've lost both efficiency as well as any obfuscation from markup and css. Let's say your designer later comes back and says "Let's change the 20px font to 24px". You'd then have to make a choice between manually setting font-size-20 to 24px or going through your entire site and changing font-size-20 to font-size-24. You'd be choosing between making your naming confusing or dealing with a headache.

SCSS is great, but I think there are better examples for applied use.

Collapse
ggenya132 profile image
Eugene Vedensky

Loops are so insanely powerful!

Collapse
isualize profile image
isualize

They are, but doing a loop like 1 to 70 generates a ton of (probably) unused CSS...

Collapse
giorgosk profile image
Giorgos Kontopoulos 👀

Perhaps you need npmjs.com/package/css-purge to cleanup the unused css but I hear you, for this reason I like to write down css classes without loops if I will only use a few variations.

Collapse
tiffany profile image
Tiffany White

CSS has variables as well.

Collapse
mandrewdarts profile image
M. Andrew Darts

Nice quick reference 👍

Collapse
samjarvis244 profile image
Jarvis the Genius

Very Helpful Thanks.

Collapse
hama05 profile image
Hippo.op

Amazing, Good job bro !