1

Dive into SCSS

By
Muhammad Wasif

2
Contents
Introduction
CSS Preprocessing 4
What is SASS? 5
Intro. To SCSS 5

Getting Started
Installation 6
Compiling SCSS 7

SCSS Basics
Variables 8
Nesting 9
Import 10
Math Operators 10

Advanced SCSS
Pseudo Selectors 12
Mixins 13
Functions 13
Extends 14

Control Flow
If Directives 16
Else If Directives 16
For Loop 17
While Loop 18

Project: Long Shadows

Project 19

3
 Introduction
This book is a complete guide for learning SCSS. Here, you’re going to discover features of
SCSS. You can understand concepts by attractive examples and sample code snippets.

CSS Preprocessing
Normally, CSS doesn’t provide us the features of a good programming language like
looping, decision-making and functions. Due to this deficiency, our CSS code is usually large
and repeating.
Pre-processors, with their advanced features, helped to achieve writing reusable,
maintainable and extensible codes in CSS. By using a pre-processor, you can easily increase
your productivity, and decrease the amount of code you are writing in a project
CSS Preprocessing allows us to write loops, functions and other modern features of a
programming language in CSS. We can use loops to repeat our block of code, use functions
to get some values after performing specific processing and of course, take decisions
depending on different situations.
Generally, there are too many CSS Preprocessors. Some are following:
 SASS
 LESS
 CSS-Crush
 Myth
 Stylus
 Clay
 DtCSS
 Switch CSS
 Rework
Some of them are based on JavaScript, some on NodeJS and some on PHP. Most famous
and widely used preprocessor is SASS. It is feature rich and has simple syntax.

4
What is SASS?
SASS is the most popular CSS preprocessor that offers many features for writing
better CSS. These features include Mixins, functions, extends and loops etc. SASS stands for
Syntactically Awesome Style Sheet. SASS has two syntaxes. One is SASS and other is SCSS.
The first one uses spaces and indentation for separating rules and code blocks, respectively.
The extension of SASS file is .sass and of SCSS is .scss.
SASS was developed by Natalie Weizenbaum and Chris Eppstein and designed Hampton
Catlin.

Intro. To SCSS
SCSS stands for Sassy Cascading Style Sheet. It is the extension of SASS with a
difference of syntax. Everything that is available in SASS is also available in SCSS. SCSS is
based on the syntax of CSS. Its file extension is .scss
Following figure explains the difference between SCSS and SASS syntax.

SASS Syntax:

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

color: $primary-color

SCSS Syntax:

$font-stack: Helvetica, sans-serif;

$primary-color: #333

body {

font: 100% $font-stack;

5
 color: $primary-color;

You can note the difference between SASS and SCSS syntax.

Getting Started
Now, we are going to learn SCSS syntax. But, first of all we need to set up our
environment to compile and run SCSS. We are going to use Ruby and Command Line for
installing SCSS in a device.
So, we need to install Ruby.

Installation
First of all, we will look at the step-by-step procedure to install Ruby.
1. First of all go to https://www.ruby-lang.org/en/downloads/ to download Ruby from
official website of Ruby.
2. Download the current stable version of Ruby.
3. Next, run the setup.

Now, you have installed Ruby but you need to perform a specific procedure to enable
Ruby commands in DOS.

4. Right click on My Computer icon and select properties from the menu.
5. Go to Advanced tab and click Environment Variables on the bottom of dialogue box.
6. In the Environment variables window click “PATH”. You will get a dialogue box.
7. Add the address of Ruby bin folder in the input. Generally it’s C:\Ruby\bin.
8. In the System Variable box, click New.
9. Enter RubyOpt in the variable name and rubygems in the variable value field add click
Ok.

Congratulations, you have successfully installed Ruby on your device.

6
Compiling SCSS
Now, we are going to compile SCSS using Ruby. SCSS compilation require Ruby on a
device so make sure that you have installed Ruby.
1. Open the command prompt and type the following command.
gem install sass

2. After this command, you will get a success message that SASS has been installed.

Now, you have successfully installed SASS in your device. Let’s take a look at the general
syntax of compiling SCSS into CSS.
sass [input.scss] [input.css]

scss command take two parameters. First one is your SCSS file and second one is CSS file.
Create a project with files index.html, style.css and style.scss. Write your styling in SCSS file
and keep the CSS file empty. After saving your SCSS file, go to command prompt and type
the above command. Your SCSS file will be compiled into CSS.

If you are getting any trouble while installing Ruby or compiling SASS, feel free to ask me at
wasif33@outlook.com or visit https://www.tutorialspoint.com/sass/sass_installation.htm for
more explanation.

7
 Basic SCSS
Now, we are going to learn SCSS syntax. Let’s start with variables.

Variables
Variables are like heart-beats in a program. A programming language loves variables. In
SCSS, we can create variables easily. We can store colors, font-sizes, borders and much more
in variables.
So let’s start by creating a variable that will store a color hex value.

$primary-color: #333;

.heading {

color: $primary-color;

A variable is declared using $ sign. After dollar sign, we write the name of variable and then
the value. The value and name is separated by a colon (:). After value, there must be a
semicolon.
Declaring a variable and assigning it a value is similar to assign a value to a property in CSS.
Just use the CSS syntax for declaring variable.
For using variable, just type the name of variable followed by a $ sign!
Now, let’s store another value in a variable.

$border: solid 2px black;

.heading {

border: $border;

Yes! We can use reserved words as a variable name in SCSS. We can store strings, numbers
(in px as well) and strings in a variable.
We can also perform operations on SCSS variables. There’s another syntax for using
variables. This syntax allows us to use variables in between strings and as well as in class
names.
Let’s have a look of this syntax.

8
#{$variable-name}

Following code snippet shows the above syntax in action.

$shadow-color: rgba(0, 0, 0, 0.5);

body {

box-shadow: “1px 1px 2px #{$shadow-color}”;

Nesting
In SASS, you can nest styling inside parent elements. Generally, child elements’ styling is
nested inside the parent element’s styling.
Nesting makes the code visually look good and attractive.
Following snippet explains the nesting in SCSS.

nav {

ul {

margin: 0;

padding: 0;

list-style: none;

li {

display: inline-block;

Above code generates the following CSS.

9
nav ul {

margin: 0;

padding: 0;

list-style: none;

nav li {

display: inline-block;

SCSS code is more understandable. You all the siblings inside a parent element just as HTML.
Nesting is a great way to organize your CSS and make it more readable.

Import
You can import another SCSS file in your default file. Just use the “import” keyword and the
address of file in in double quotations.

@import 'reset';

This will import an SCSS file named ‘reset’. SCSS import allows you to split your code into
smaller parts. Note that you don’t need to
declare file extension in the name of file.
Note that every SCSS reserved word is followed by
SCSS is smart enough to recognize it.
@ symbol. We will use this for next keywords also.
Splitting up a code is a good practice.
For example: @for, @if, @mixin
After splitting a codes in different parts,
import all the files in basic CSS file.

Math Operators
Performing Math operation in CSS is very useful. You can sum, divide, subtract and multiply
values to get another value. We can add some px and much more. Module operator ( % ) is
also available in SCSS.
Let’s take a look at these operations.

10
$width: 200px;

.container {

width: $width + 100px;

article[role="main"] {

float: left;

width: 600px / 960px * 100%;

Above code snippet shows the use of math operators in SCSS. Using math for calculating
different values is very useful and handy feature in SCSS. While in simple CSS, we can’t
perform such calculations.

11
 Advanced SCSS
Now, we have learnt hot declare variables, import files and perform math in SCSS. Let’s level
up our SCSS skills by learning how to declare functions and more!

Pseudo Selectors
In SCSS, the way of declaring pseudo selectors is a little bit different. We use nesting
technique to define such selectors. & symbol is used instead of the name of selector. The
styling is nested inside the main selector.
Let’s take a look at the example.

a {

&:hover {

color: red;

Similar, technique is used with other selectors.

For example:

$left-pos: 20px;

div {

&::after {

content: “Hello SCSS”;

position: absolute;

left: $left-pos;

SCSS shortens the code and make it more understandable as compared to CSS.

12
Mixins
Mixins is one of the awesome features of SCSS. It is similar to the functions in other
programming languages. You can define a block of code and name it just as function. Then,
you will be able to use the block of code just by calling the name of mixin.
A mixin is created with the following syntax:
@mixin [name]($propert){
// Code goes here
}

In parentheses, arguments or parameters are written in the form of variable. Parameters are
separated by comma ( , ).
To call a mixin we use “@include” keyword with the name of the mixin.
Following syntax shows how to call a mixin.
@include [name]($property);

Following is an example code snippet that shows the use of mixin in action.

@mixin circle ($radius, $color) {

width: $radius;

height: $radius;

border-radius: 50%;

background-color: $color;

div {

@include circle(30px, tomato);

This is how we can create mixin and avoid repeating a block of code again and again.

Functions
Functions are not similar to mixin. A function returns a value while a mixin can’t return a
value.
Following is the syntax for declaring functions.
@function [name]($property){
@return value-to-be-returned;
}

13
Functions can perform mathematical operations and return a value. Following snippet
shows the example of using functions in SCSS.

@function sum($val_1, $val_2) {

$sum: $val_1 + $val_2;

@return $sum;

div {

width: sum(20px, 50px);

Extends
If you want to inherit CSS properties in different elements, using extends is a good choice.
Extends follow the DRY (Don’t Repeat Yourself) strategy. We will write CSS rules once and
use it for a number of times.
Following is the syntax of defining extends:
%extend-name {
// CSS rules
}

Yes! It’s simple. After declaring an extend, we can use it by just calling its name with a %
symbol. Use the following syntax for calling extends:
@extend %extend-name;

In this way, you can use extends. See following code sample to understand the working of
extends.

%centered {

display: flex;

justify-content: center;

align-items: center;

14
.message {

background-color: #efefef;

@extend %centered;

Extends shortens our CSS!

15
 Control Flow
Control flow controls the execution of a program. It decides whether a part of program
should execute or not depending upon different conditions. It includes the following
concepts:
 Loops
 If else statements
Loops repeat our block of code and if else statement controls the execution flow.

If Directives
If statement decides whether a block of code should execute or not. If the condition given
gets true, the code will be executed.
Following is the syntax of if statement.
@if (condition){
// block of code
}

Let’s see the above syntax in action!

$x: 50;

$y: 93;

div {

@if ($x < $y) {

width: 67px;

Now, if the value of x is less than the value of y then the code inside @if block will execute.

Else if Directives
Else if directives gives us more command over the execution. If a condition gets false the
else part with if directives will execute. We can embed if else statement a number of times in
a program.

16
Else if directives have the same syntax as if directives. It uses @symbol before “else if”
keyword. Let’s see an example to understand this concept better.

$x: 50;

$y: 93;

div {

@if ($x < $y) {

width: 30px;

} @else if ($x > $y) {

width: 70px;

For Loops
For loops can repeat the block of code several times. We use a for loop when we know that
how many times loop should be repeated.
Following is the syntax of for loop:

@for $variable from number through number {

// block of code
}

Within braces, the code is written that is to be repeated. Following is the example code of a
for loop.

div {

@for $i from 1 through 5 {

.div-#{$i}{

width: 80px;

} }

17
The above code will set the width of all divs with class .div-1, .div-2, .div-3, .div-4 and .div-5 to
80px. In simple CSS, you have to select all the elements individually. But SCSS makes the
work easy.

While Loop
We use while loop when we don’t know how many times the block of code should be
repeated.
Following is the syntax of a while loop.
@while condition {
// block of code
}

Have a look of following code snippet to see the while loop in action.

$num: 4;

@while $num > 0{

.module-#{$num}{

content: “#{$num}”;

$num: $num – 1;

Congratulations, you have finished the loops!

18
 Project: Long Shadows
Now, we have learnt SCSS. Let’s create a simple and mini project. Our project will generate
shadows to a text. These shadows will look like this.

You are about to use for loop and repeat the text-shadow property for about 50 times in the
heading element with the increasing x-offset and y-offset of shadow. Keep the blur-radius to
0px.
And here we go!

19