SCSS: The Sassier Version of CSS
Tags: scss, tutorial, programming, css
Published: 2023-09-04 19:35:00

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:

```scss
$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:

```scss
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:

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

this would be the same as:

```css
.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:

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

This is equivalent to writing:

```css
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:

```scss
@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:

```scss
.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:

```scss
@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:

```scss
.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:

```scss
$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:

```scss
$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:

```scss
// 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`.