General info

Sass: (Syntactically Awesome Style Sheets) it is a powerful tool that provides the CSS language with some useful programming features like variables, functions, imports, and exports.

Sass files have the extension (.scss) and we link them to HTML files in a similar way that we used with CSS files.

Setting the environment

1) Install live Sass compiler extension on VSCode

2) Create a regular HTML file

3) Create a folder named (styles) and create a Sass file inside it called (style.scss)

4) Click the eye button at the bottom of the VSCode screen that says (Sass watch). It will translate your Sass (.scss) file into a regular CSS (.css) file and create one

5) Now go to your HTML file and link the new CSS (style.css) to it the regular way. Now whatever you write in the Sass file will be translated into CSS and it will update the CSS file.

Important:

now, we only type our styles in the Sass file, we shouldn’t change anything from the CSS file.

Variables handling

We can store attributes' values inside variables to use them anywhere in the code.

Create the variable

$primaryColor: rgb(255, 255, 255);

it will create a variable called (primaryColor) and give it the value of the RGB color so we can use it multiple times

Use the variable

background-color: $primaryColor;

it will use the value of the variable (primaryColor) as the value of the attribute (background-color)

Nesting HTML attributes

Instead of typing many selectors to specify internal elements’ styles, we can put the internal selectors inside the brackets of the parent selector

Old way:

body{
    background-color: white;
}
body div{
    color: black;
}
body p{
    color: red;
}

New way:

body{
    background-color: white;
    div {
        color: black;
    }
    p {
        color: red;
    }  
}

Separating the Sass file into groups

We can divide our Sass code into many sub-files and link them together to organize the code.

1) We have to create the sub-file whose name must start with an underscore ( _ ). So, create a new Sass file inside the styles folder called (_header.scss) and put your CSS code for the heard element inside it

2) Now go back to the main Sass file and import the new sub-file

@import "./header";

3) Now the two files will be merged together

Building and calling Functions

Creating the function We use the (mixin) keyword to create a function in Sass, with or without arguments.

The following function (flexCenter) will apply the centering process using (flex) and providing a specified direction on any element that calls it.

@mixin flexCenter($dir) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $dir;
}

Calling the function We use the keyword (include) to call a function and pass arguments to be applied. The following div will have a centered flex display value with a column flex-direction.

div {
    @include flexCenter(column);   
}

Inheriting styles

We can inherit all styles from one selector to another by the keyword (extend).

Defining the original selector We give a style to an element by the class (.box)

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

Inheriting the styles to another selector Now we can provide the body element with all the styles of the (.box) class

body {
    @extend .box;
}

Overriding a style We can override an inherited style by reassigning its value again in the new selector

body{
    @extend .box;
    flex-direction: column;
}

Arithmetic operations

We can use arithmetic operations like + - / * with numeric values like width and height to result in dynamic responsive styles.

main{
    width: 400px - 300px;
}