CSS with Superpowers

What is SCSS ?

Sass or Scss is a supertype of CSS (Cascading Style Sheets). Sass was officially described as CSS with superpowers.

Sass and Scss are same in terms of what it does. It is okay to use one of the two for your project with your preference.

The main difference between scss and sass is their coding standards. Scss uses the standard css coding conventions whereas sass uses indentation and short hand methods.

.scss

button {
   background-color: red;
}

.sass

button
   background-color: red

What SCSS do for us ?

We use CSS to make our web pages structured , beautiful and responsive. SCSS helps to do this easily and in less time.

Features of SCSS

• Variables
• Nesting
• Mixins
• Inheritance
• Import
• Use
• Forward

Variables

Variables are used to allocate a key and a value for reusable values throughout an application. Easy to use when long text required as the value of the property because we don't need to remember it because we only need to use the variable name as the value. Dollar sign refers to variable names.

$dark: #000000

Nesting

Let's assume the below scenario in a html page given to you for style it.

<div class="myDiv">
   <h1 class="myHeading">Hello</h1>
</div>

The css way of doing styles for this should be as below

div.myDiv {
   background: red;
}

div.myDiv  h1.myHeading {
   color: white;
}

And as we can see the css selectors getting longer gradually when nested elements being added to our html. To address this issue we use nesting in scss. The scss solution is like below. By doing it this way we don't need to repeat the css selector (div.myDiv) again and again.

div.myDiv {
   background: red;

   h1.myHeading {
      color: white;
   }
}

Mixins

Mixins are css rulesets that are referenced in a scss stylesheet that are usable as a function which returns that ruleset. It can involve passing with (parameters) or not.

@mixin background-color($primary: red) {
   background-color: $primary;
}

div.myDiv {
   @include background-color(teal);
}

Inheritance

Inheritance used to inherit styles from defined styles for elements or defined utility classes and override them using their class reference.

.yourDiv {
   background-color: red;
   color: white;
}

.myDiv {
   @extend .yourDiv;
   text-decoration: underline;
}

@Import

Import functionality uses the adpotation of modular usage of css which means we can define stylesheets based on their responsibility and use them in a single scss file using @import keyword.

@import 'typography';

@Use

This functionality loads other css rulesets, mixins and variables defined in another sass stylesheet in scss stylesheet. @Use works like import as a variable reference.

@use 'typography';

h3.myHeading {
   font-size: typography.$fs-m;
}

Using it as opposed to import we can scope our rulesets from referencing with the stylesheet reference. As an example this helps if we have different dark and light css themes together to use.

@Forward

This functionality loads scss stylesheets for use when there are nested imports need to take place. So when you need to use scss sheets in a main scss file this helps by loading it to use. This reduces your import statements and use statements you need in your stylesheet.

@forward 'myVariables'

How to apply SCSS ?

SCSS is great in many ways but we can't use .scss or .sass files directly in our html using a link tag like we did with css. There is a procedure to convert scss files into css which is called precompiling scss to css.

Precompilers get the scss files and convert them to css as you command. Then it gives the output as a css stylesheet which you can use in your application with a link tag.

To use a precompiler we have few options.

1. For static web apps use an extension available for your IDE / Editor

2. For node based apps use an automated task runner like gulp-sass which automatically watches for changes in your given directory and compile it at the same time.

When to use SCSS ?

You can use scss rather than conventional css in,

• Stylings for single page web applications
• Stylings for enterprise level web applications
• When starting with a scss theme or to make a theme
• To modify css more in a html template before use

Learn more about scss with following links

https://sass-lang.com/documentation
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
https://www.npmjs.com/package/gulp-sass