Awesome SCSS: The basics
Tags: webdev, css, tutorial, beginners
Published: 2020-05-03 20:45:30

---
title: Awesome SCSS: The basics
published: true
description: A quick introduction to SCSS.
tags: webdev, CSS, tutorial, beginners 
series: [Awesome SCSS]
cover_image: https://images.pexels.com/photos/1194420/pexels-photo-1194420.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
---
The great thing about SCSS is that it makes CSS becomes more lively by adding `variables`, `functions`, `logic` and `looping` to it.
This opens a whole new level of flexibility to CSSS.

This article will give an overview of the `variables` & `functions` in SCSS. As for the `logic` and `looping` part, that will be in another article.

# SCSS Variables 
A variable is a 'container' which stores value.

In SCSS, variables start with a `$` sign and end with a `;`.
To make it easier to read, the variable name can be separated by a `-` or a `_`.
example:

```scss
$color-one: red;
$color_two: blue;
$color-three: orange;

h1 { color: $color-one; }
.blue { color: $color_two; }
#orange { color: $color-three; }
```

## Variable Scopes
A variable can have global scope or local scope.

### Global scope
Globally scoped variables are generally 'declared' at the beginning/top of the SCSS file outside any curly braces `{  }`. 
In the example below: `$color-one` is globally scoped.

```scss
$color-one: red; 

h1 { color: $color-one; }
```

### Local scope
Locally scoped variables are created within the curly braces `{  }`.
In the example, `$color-five`, which is globally scoped, has been initially assigned a value of `black`. 
Later on, it has been assigned a new value of `purple`.
Since this assignment is within `{  }`, we say that it is locally scoped.
The new value will persist only within the `{  }` and not elsewhere.

```scss
$color-one: red; 
$color-five: black;

h1 {
  color: $color-one;
}
.newColor {
  $color-five: purple;
  color: $color-five;
  border: 1px solid $color-five;
}
```
We can use `!global` to enforce the value of a local variable globally, but it is not recommended. Hence, I'm not showing any example.

{% codepen https://codepen.io/rishiabee/pen/RwWjZPP %}


# Nesting in SCSS

Nesting makes the code easier to read.
> Avoid nesting many levels, it'll make the code harder to read & understand.

To nest pseudo-classes, we need to prepend the pseudo-class with a `&`. 
Example `&:hover`.

```scss
$size: 3em;
$color: blueviolet;
$color-hover: red;

/* Nesting with SCSS */
nav {
  ul li {
    background-color: lime;
    text-decoration: none;
  }
  a {
    font-weight: bold;
    &:hover {
      color: $color-hover;
      font-size: $size;
    }
  }
}

/* Normal CSS */
a {
   font-size: $size;
   color: $color;
   text-decoration: none;
}
a:hover{
   color: green;
   font-size: 2em;
}
```
{% codepen https://codepen.io/rishiabee/pen/MWaOOXv %}


# Mixins

Mixin is a block of **reusable** CSS styles grouped together. 
Did I mention "reusable"?

We declare a **mixin** by using `@mixin` followed by a name.

To call/use a mixin, we use `@inlcude` followed by the mixin name.
```scss
@mixin headingStyles {
  background-color: $color;
  text-align: center;
}

.header {
  @include headingStyles;
}
```

## Mixin parameter

### Mixin parameter: single + default value

Mixin can accept a parameter.
That parameter can be given a default value if required.

```scss
$font-lg: 2em;

@mixin headingFont($size: 3em) {
  color: $color-second;
  font-size: $size * 2;
}

.header {
  @include headingFont($font-lg);
}
```
### Mixin parameters: multiple

To pass in more than one parameter, we need to use a parameter name followed by  `...` 3-dots.

```scss
@mixin myTransition($params...) {
  transition: $params;
}

.text {
    @include headingFont();
    @include myTransition(color .5s, background-color 1s);
  
     &:hover {
      color: $color;
      background-color: $color-second;  
  }
}
```

{% codepen https://codepen.io/rishiabee/pen/GRpOyJp %}

# Extend

Extends allows one selector to inherit styles of another selector.
Like `@mixin`, `@extend` allows us to write cleaner and better code.

```scss
.heading {
  color: red;
  background-color: gold;
}

h1 {
  @extend .heading;
}

h2 {
  @extend .heading;
  text-align: center;
}
```
{% codepen https://codepen.io/rishiabee/pen/XWmzVqG %}

# Placeholder Selectors

If we have classes which are not used anywhere, we can make them become placeholders by replacing the `.` with a `%`.
For example an unused `.heading` becomes `%heading`.

Then we call it similarly as `@extend`.

```scss
%heading {
  color: red;
  background-color: gold;
}

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

h1 {
  @extend %heading;
}

h2 {
  @extend %heading;
  text-align: center;
}

p {
  @extend %toolbelt;
}
```


{% codepen https://codepen.io/rishiabee/pen/jObazqb %}

# Functions

Functions, like in all programming languages, allows us to execute the block of logic multiple times.

A function is declared with `@function` followed by a name, similar to a mixin.
However, a function *has* to return a value. To do so we use the `@return` keyword.

The function can also accept a parameter.

```scss
$size: 4em;

@function setFontSize($newSize: 1em) {
  @return $newSize;
}

@function doubleFontSize($newSize: 1em) {
  @return $newSize * 2;
}

.normal {
  font-size: setFontSize();
  color: red;
}

.biggest {
    font-size: setFontSize($size);
    color: green;
}

.doubled {
  font-size: doubleFontSize();
  color: blue;
}
```
{% codepen https://codepen.io/rishiabee/pen/dyYZdeV %}

## Built-in Functions  

SCSS comes with many useful functions.

```scss
$orange-color: orange;

.orange {
  background-color: $orange-color
}

.orange-lighten {
  background-color: lighten($orange-color, 25%);
}

.orange-darken {
  background-color: darken($orange-color, 10%);
}

.mixed-color {
  background-color: mix($orange-color, blue);
  color:white;
}
```
{% codepen https://codepen.io/rishiabee/pen/vYNWdPr %}

> A whole list of functions can be found here ➡️ https://www.rubydoc.info/github/sass/sass/Sass/Script/Functions