Awesome SCSS: The basics

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:

$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.

$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.

$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.

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.

$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;
}

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.

@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.

$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.

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

.text {
    @include headingFont();
    @include myTransition(color .5s, background-color 1s);

     &:hover {
      color: $color;
      background-color: $color-second;  
  }
}

Extend

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

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

h1 {
  @extend .heading;
}

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

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.

%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;
}

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.

$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;
}

Built-in Functions

SCSS comes with many useful functions.

$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;
}

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

Comments

[Raymond]

Thanks for writing this article. I think SASS may be a big improvement when I make user styles the next time.

[Rishi]

Indeed, it does simplify things.
Keep an eye for my next post. It’ll be about some more advanced feature of SCSS.

Thanks :)

[Joost Helberg]

Nice article. Two questions: SASS and SCSS are both mentioned for the same concept, is this intentional? SCSS looks like a pre processor for CCS, is this the way browsers implement this?

[Rishi]

That was an indeed a typo error, which I've corrected thank you.

SASS & SCSS are very similar but are syntactically different. SASS doesn't have braces { } and ending semi-colons ;. No need to use @include for mixin, use + reducing keystrokes.

And there are many more, do have a look at this article to better understand the differences.
thesassway.com/editorial/sass-vs-s...

And thanks again @jhelberg . Much appreciated.