SCSS is a file extension and syntax for CSS that adds powerful features like nesting, variables, mixins and more. SCSS files are compiled into regular CSS files. Using SCSS allows for better organization of CSS through modularity and variables, which cuts down development time. It also automatically concatenates and minifies CSS. To use SCSS, install the sass gem and save CSS files with a .scss extension. Then use the sass watch command to automatically compile SCSS files into CSS.

1. SCSS: The Basics

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

3. Why Use SCSS?
1. Better Organization/Modularization of CSS files:

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

5. I.e. SCSS Concatenates Modularized
Files Automatically and Converts
Them into Valid CSS Files

6. 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;}

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

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

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

10. 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;}

11. Everyone Has to Come Onboard
Bhagaban doesn't use SCSS. Instead, he customizes
directly on style.css:
.button{
font-size:10px;
background-color:#ffce54;
}

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

13. 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.)

14. It's Easy to use SCSS NOW
3. Let Sass watch over your file:
sass --watchsass --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.

15. More Resources

The official tutorial on Sass homepage:
http://sass-lang.com/tutorial.html

Compass: sort of a add-on to Sass that provides
even more features: http://compass-style.org/help/
, but which I haven't found absolutely necessary
to get into so far.

16. Questions?