Power of SASS
Tags: saas, css, webdev, scss
Published: 2021-04-20 04:37:56

> Learning SASS is a must-have skill for web developers! In this article, I will be showing some simple SASS with SCSS syntax examples! I will be sharing what I have recently learned and how to implement it.

# Article Outline 
- What are SASS & SCSS?
- SCSS examples
- Resources
- Conclusion

<hr/>

## What are SASS & SCSS?
SASS or Syntactically Awesome Style Sheets is an extension of CSS, and it is responsible for styling `HTML` documents! It uses fully compatible `CSS` syntax but provides additional features like variables, @extend, @mixin & @include, and nested rules that save developer time! 

There are two syntaxes of SASS, SCSS (Sassy CSS or .scss) is the main one, and there is also the indented syntax(.sass). Differences in syntax can be viewed [here](https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/)

## SCSS example
I will be writing some examples of using SCSS! Do note that this is solely from what I understood and found useful! There are more additional features that you can find via the documentation!

- Using variables

>If I know that uniform styling will be used for specific selectors, I can declare variables for the styling and assign them to the selectors. For example, some divs might have the same color across the page. If I decided to change the color in the future, all I have to edit is the variable declared. This will save so much time finding the classes to change the CSS styling one by one.

```css
/*scss file*/
$bg-color: #c6512c;
$border-color: #000f46;

 .div1{
  background-colour: $bg-color
  border: 1px solid $border-color;
}

 .div2{
  background-colour: $bg-color
  border: 1px solid $border-color;
}
```

- Nested rules  

>  Nesting improves code readability and maintainability. It can be used if we have selectors that share the same parent, for example:

```css
/*scss file*/
article {
  h1 {
    color: white;
  }

  img {
    border-radius: 50%;
  }
}
```

- @extend 

> With the @extend rule, we can add the styling of one class to another.  

```css
/*scss file*/
.style-1 {
  color: white;

  height: 80%;
}

.style-2 {
  @extend .class-1;

  background-color: black
}
```
- @mixin & @include  

> These two combinations are like blueprints and workers! @mixin allows us to define CSS rules and use the rules in our selectors to create styling faster!

```css
/*scss file*/
@mixin card($width, $height, $bg, $box-shadow) {
  width: $width;

  height: $height;

  background: $bg;

  box-shadow: $box-shadow;
}
```

> As we make new cards with the same rules but different styling, we call the card mixin with the @include rule and pass the arguments required for the cards to it:

```css
/* scss file */
.card-1 {
  @include card(50%, 30%, #404040, 5px 10px );
}

.card-2 {
  @include card(40%, 50%, blue, 5px 10px #888888);
}
```

## Resources
- [SASS documentation](https://sass-lang.com/documentation)
- [Difference between CSS and SCSS](https://codersera.com/blog/difference-between-css-and-scss/)
- [SASS crash course](https://www.youtube.com/watch?v=nu5mdN2JIwM)
- [Pros & Cons of SASS/SCSS](https://medium.com/@virginialash1/pros-cons-of-sass-scss-4e4152b658f8)

## Conclusion
We can all see eye to eye that SASS with SCSS syntax has its advantages! But that does not mean that it can 100% replace CSS! There are also cons of using SCSS and can be found [here](https://medium.com/@virginialash1/pros-cons-of-sass-scss-4e4152b658f8)!🤗

## Thank you for reading!
These were only a few examples! SASS with SCSS syntax is very useful and saves time for us developers. 😄

If you liked what you read, follow me for similar content and check out my other articles! Subscribe to my newsletter to get updated when I post a new article!