DEV Community

Cover image for SCSS: The Sassier Version of CSS
Waradu
Waradu

Posted on • Edited on

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

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

This selector

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

.class {
  color: red;
  &:hover {
    color: green;
  }
}
Enter fullscreen mode Exit fullscreen mode

this would be the same as:

.class {
  color: red;
}
.class:hover {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

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

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

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

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

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.

Top comments (4)

Collapse
 
michaeltaylor profile image
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.

Collapse
 
waradu profile image
Waradu • Edited

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

.class {
  color: red;
  &:hover {
    color: green;
  }
}
Enter fullscreen mode Exit fullscreen mode

this would be the same as:

.class {
  color: red;
}
.class:hover {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
jonrandy profile image
Jon Randy 🎖️

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

Collapse
 
waradu profile image
Waradu

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