SCSS: The Basics

First Things First

SASS=SCSS. Sass is the name of the framework, while SCSS is basically the file extension name used for Sass. E.g. style.scss. They are often used interchangeably.

SCSS files are just CSS files with a .scss extension, i.e. you can still write your old css in an .scss file.

Why Use SCSS?

1. Better Organization/Modularization of CSS files:

It is possible to break down CSS into different files without using SCSS, but then:

1. It will be a pain to manually concatenate them into one or two files

2. If we do not concatenate them, and instead rely on the @import directive, then we will be making many HTTP requests to load the respective CSS, thus increasing load time.

I.e. SCSS Concatenates Modularized

Files Automatically and Converts

Them into Valid CSS Files

Why Use SCSS?

2. Able to use Variables with CSS

E.g. instead of copy-pasting the color #F89939 everywhere we need it, we do:

/* Define our custom orange color */

$yellow: #ffd320;

/* Use it anywhere */

.box {border:1px solid $yellow;}

div{background-color:$yellow;}

Using variables also means: no more Find and Replace String if we decide to change property values:

/*Just change here:*/

$yellow: #ffce54;

/* And it's reflected everywhere */

.box {border:1px solid $yellow;}

div{background-color:$yellow;}

I.e. SCSS Allows Use of Variables that Cuts Down Development Time

Why Use SCSS?

3. Automatic minification of CSS files

4. Able to use standard math operations (+, -, *, /, and %) with CSS

5. Adjust colors within SCSS, e.g. darken($yellow, 20%);

6. Use arguments and functions, …

And More.

Everyone Has to Come Onboard

E.g. Anthony writes this in his style.scss:

$yellow: #ffce54;

.button{background-color:$yellow;}

Which is converted into the following style.css:

.button{background-color:#ffce54;}

Everyone Has to Come Onboard

Bhagaban doesn't use SCSS. Instead, he customizes directly on style.css:

.button{

font-size:10px;

background-color:#ffce54;

}

Everyone Has to Come Onboard

Anthony isn't aware of that particular change, and continues working off his style.scss:

$yellow: #ffce54;

.button{color:#000;background-color:$yellow;}

Which is converted to the following css:

.button{color:#000;background-color:#ffce54;}

...hence overwriting Bhagaban's font-size:10px; without knowing it.

It's Easy to Use SCSS NOW

1. With Ruby already installed on Mac, all we need is:

gem install sassgem install sass

2. Instead of editing a CSS file, we now edit a .SCSS file. Either I pass you the SCSS file I started off, or you can simply save your CSS file with .SCSS extension. (Every valid CSS rule is valid SCSS, so if you are lazy to learn SCSS syntax at first, you can write CSS on a .SCSS file.)

It's Easy to use SCSS NOW

3. Let Sass watch over your file:

sass --watch sass --watch

stylesheets/scss/app.scssstylesheets/scss/app.scss

::

stylesheets/css/app.cssstylesheets/css/app.css

Which basically means Sass will convert all your .scss files inside the scss/ folder into valid CSS files inside the css/ folder automatically, without you worrying over it.

Questions?