Power of SASS

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

---

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

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.

/*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:

/*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.

/*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!

/*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:

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

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

Resources

• SASS documentation
• Difference between CSS and SCSS
• SASS crash course
• Pros & Cons of SASS/SCSS

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!🤗

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!