SCSS: The Sassier Version of CSS

Hello, In this article, I will introduce you to some of the key features of SCSS and show you how to use them in your projects.

Variables

You can use variables for any CSS property like font, color and sizes. To create a variable, you use the $ symbol:

$primary-color: #ff0000;
$secondary-color: #00ff00;
$font-family: Arial, sans-serif;

To use a variable, you simply write its name instead of the value. For example:

h1 {
  color: $primary-color;
  font-family: $font-family;
}

p {
  color: $secondary-color;
  font-family: $font-family;
}

This selector

You can use „&“ to select the current element:

.class {
  color: red;
  &:hover {
    color: green;
  }
}

this would be the same as:

.class {
  color: red;
}
.class:hover {
  color: green;
}

Nesting

Nesting allows you to write selectors that follow the same structure as your HTML. Instead of writing long and repetitive selectors, you can nest them inside each other using curly braces. For example:

nav {
  background-color: #333;
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: #fff;
        text-decoration: none;
      }
    }
  }
}

This is equivalent to writing:

nav {
  background-color: #333;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

Mixins

Mixins are a way to define reusable chunks of code that can accept arguments and return different values depending on the input. To create a mixin, you use @mixin followed by the name of the mixin and optionally some parameters. For example:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

To use a mixin, you use the @include directive followed by the name of the mixin and optionally some arguments. For example:

.button {
  @include border-radius(10px);
}

Functions

Functions are similar to mixins, but they return a single value instead of a block of code. You can use functions for calculations, conversions, or manipulations of values. To create a function, you use the @function directive followed by the name of the function and optionally some parameters. For example:

@function darken($color, $amount) {
  return mix(black, $color, $amount);
}

To use a function, you simply write its name followed by parentheses and optionally some arguments. For example:

.button:hover {
  background-color: darken($primary-color, 10%);
}

Use

To use code from another file, just write @use: 'path/filename.scss';.
Variables can be used from other files with 'filename.$variablename'

Operators

You can use operators to perform calculations, comparisons, or concatenations in your SCSS code. For example:

$width: 100px;
$height: 50px;

div {
  width: $width * 2; // 200px
  height: $height / 2; // 25px
  margin: ($width + $height) / 4; // 37.5px
}

p {
  font-size: 12px + 2px; // 14px
}

a {
  color: #fff or #000; // #fff
}

Conditionals

Conditionals are statements that execute different blocks of code depending on whether a condition is true or false. You can use conditionals to apply different styles based on variables, functions, or expressions. To create a conditional, you use the @if, @else if, and @else directives followed by a condition and a block of code. For example:

$theme: dark;

body {
  @if $theme == dark {
    background-color: #000;
    color: #fff;
  } @else if $theme == light {
    background-color: #fff;
    color: #000;
  } @else {
    background-color: #333;
    color: #ccc;
  }
}

Loops

Loops are statements that repeat a block of code a number of times or for each element in a list or a map. To create a loop, you use the @for, @each, or @while directives followed by a variable, a range, or a condition and a block of code. For example:

// For loop

@for $i from 1 through 5 {
  .col-#{$i} {
    width: $i * 20%;
  }
}

// Each loop

$colors: red, green, blue;

@each $color in $colors {
  .#{$color}-text {
    color: $color;
  }
}

// While loop

$i: 1;

@while $i < 10 {
  .item-#{$i} {
    margin-left: $i * 10px;
  }

  $i: $i + 1;
}

Conclusion

SCSS is a powerful and expressive way to write CSS that can save you time and effort.

If you have any questions/problems/ideas, feel free to add me on discord: waradu.

Comments

[Michael R. Taylor]

Thank you for this post! It comes at a perfect time for me. I'm brushing up on my SCSS skills for a Hugo theme.

[Waradu]

thx. i forgot smth btw.
You can use „&“ to select the current element:

.class {
  color: red;
  &:hover {
    color: green;
  }
}

this would be the same as:

.class {
  color: red;
}
.class:hover {
  color: green;
}

one if the features i use the most (after nesting)

[Jon Randy 🎖️]

What does the header image have to do with the article?

[Waradu]

hahaha, sorry I used the wrong one, i was in a hurry.