Sass Crash Course

Sass Crash Course by Duncan

What is Sass?
How to Run Sass
Sass Variables
Sass Nesting
Sass Modules
Sass Mixins
Sass Extend
Sass Operators
Other Resources

What is Sass?

Sass stands for Synthetically Awesome Style Sheets. It is a CSS Pre-processor. Sass is more likely CSS with Super Powers. It is a scripting language that add functionality to CSS making it more easier to work with it. To work with Sass, you must know HTML and CSS.
PS: Sass is written in Ruby.

How to Run Sass.

Sass is CSS with super powers. The Web Browser will not understand the Sass code when you write it. You need a different method to run the code. To run Sass, you need to compile it to CSS and the Web Browser will read and run the CSS for you. To compile the Sass, you can use Koala Compiler which is a desktop application or Live Sass Compiler (An Extension in most IDE's and Code Editors)

Sass Variables

Just like any programming language, sass allows you to store information in a variable and recall them later. The syntax is to begin the variable name with a $ and the variable names follow the same rules as variable names for Ruby.



            $body-color: #252525; 

              $body-font: Consolas, sans-serif; 

              

              body{ 

                  color: $body-color; 

                  font-family: $body-font; 

              }

Sass Nesting

Just like HTML tags and Javascript, Sass also supports nesting of the CSS Selectors, which make it easier with a single parent and less confusing.


            table { 

              th { 

                  color: #252525; 

                  font-weight: 700; 

                } 

                  tr { 

                    a { 

                     color: #ff00cc 

                    } 

                

                      img { 

                          border: 2px; 

                      } 

                      } 

            }

Sass Modules

Working on large projects, it is easier to split the Big Sass File into Smaller ones to increase speed and enable a team to work easily. You can import or use another Sass file in your work, including all the variables, mixins, functions, etc.
@use 'file_name' is the syntax to import the Sass file.
The external file must be in the same directory


            // variables.scss 

            

            $primary-color: #ffcc00; 

            $secondary-color: #252525; 

            $body-font: Roboto, sans-serif;


            

            // main.scss 

            

            @use 'variables'; 

            p { 

                color: variables.$primary-color; 

                backgroung-color: variables.$secondary-color; 

                font-family: variables.$body-font; 

            }

Sass Mixins

Mixins, just like Ruby is also Supported in Sass. With mixin, you can create a CSS declaration and use them in your code over and over. You can also use variable names as arguments in the mixin.
@mixin is used to declare a mixin.
It is similiar to functions but there is a difference.


          

            @mixin heading($color, $size, $weight) { 

                color: $color; 

                font-size: $size; 

                font-weight: $weight; 

            } 

            

            .heading { 

                @include heading(green, 20px, 500) 

            }

Sass Extend

With extend, you share the CSS properties from one selector to another. It makes it easier and avoids copying and pasting the same properties over and over again.
@extend is the syntax for extending.


            .button { 

                font-size: 10px; 

                color: #ffcc00; 

                text-align: center; 

                background-color: blue; 

            } 

            

            .button-2 { 

                @extend .button; 

            }

Sass Operators

Just like any other programming languages, Sass can perform mathematical operations. Standard operations like addition, subtraction, division and multiplication are supported.
The units of the values must be the same.


            .paragraph-2 { 

                font-size: 2px + 3px; 

                font-weight: 100 * 5; 

            } 

            

            .img-1 { 

                width: 100% - 20%; 

                height: 100px / 5; 

            }

Other Resources

If you are interested learning Sass, there are many resources online. One which I would recommend is The Net Ninja Sass Playlist. You can also check the Sass Documentation for more.