Introduction:

SCSS are almost the same as CSS but there are some extra cool features.

In general, browsers don't understand SCSS features.

In order to run them in the browsers, we have to convert SCSS to CSS.

There are almost many online tools to convert it but if you use Visual Studio Code I could prefer you to use Live Sass Compiler which you can find in Visual Studio Code Market Place.

It is a simple extension that could compile your SCSS to CSS.

When SCSS compile to CSS it converts for all browsers combability.

Examples of Using SCSS Features:

Variables -

• SCSS

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: $font-stack;
  color: $primary-color;
}

• Output in CSS

body {
  font: Helvetica, sans-serif;
  color: #333;
}

Nesting -

• SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }

.loginBtn {
    background: lightbluel;

    &:hover {
     background: lightcoral;
    }
  }
}

• Output in CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

nav .loginBtn {
  background: lightbluel;
}

nav .loginBtn:hover {
  background: lightcoral;
}

Modules -

• SCSS

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

• Output in CSS

body {
  font: Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

Mixins -

• SCSS

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

• Output in CSS

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

Operators -

• SCSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

• Output in CSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}