SASS

SASS (Syntactically Awesome Style Sheets) is a preprocessor scripting language that extends CSS. It adds features like variables, nesting, and mixins, enhancing the power and efficiency of styling web pages. Sass files are compiled into standard CSS for browser interpretation.

Since browsers are unable to read a SASS file, so, we are required to use a sass compiler that converts its file to a normal CSS file. It also helps reduces the overall length of the code by discarding the repeated CSS code and therefore saves time. It was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.

Features of SASS

• SASS is CSS-compatible i.e. it is fully compatible with every version of CSS.
• It supports the various extension of Languages such as variables, nesting, and mixins.
• It is well-formatted with supports the customizable output.
• It facilitates a number of useful functions for manipulating colors and other values, etc.
• It provides the Sass pre-processor that helps the web browser recognize the Sass codes into simple standard CSS.

The conversion of one syntax to another can automatically be done using the sass-convert command-line tool in the file. SASS can be implemented in 5 ways:

• Using the import statement
• Using the node & npm
• Using the Command-line tool
• Using the Standalone-Ruby module
• Using installing the Plugin

SASS Tutorial

• SASS | Introduction
• SASS full form
• SASS | Built-In Modules
• SASS | Color Functions
• SASS | Map Functions
• SASS | List Functions
• SASS | Numeric Functions
• SASS | Selector Functions
• SASS | Placeholder Selectors
• SASS Parent Selector
• Sorting Function In SASS
• SASS | Nesting
• SASS | Introspection Functions
• SASS | Operators
• SASS | Relational Operators
• SASS | String Operators
• SASS Equality Operators
• SASS | Numeric operators
• SASS | Booleans and Boolean operators
• SASS | Style Rules
• SASS | @if and @else
• Sass @extend Rule
• SASS @for and @while Rule
• Sass @function Rule
• SASS | @forward rule
• Sass | @at-root rule
• Sass @each Rule
• @include vs @extend in SASS
• SASS | @mixin and @include

Steps for installing the SASS

We will follow the below steps to install the SASS through Package Manager.

Step 1: To install SASS, first make sure that node and npm are already installed in the system. If not, then install them using the instructions given below.

• First, download the latest version of a node in the system and install it.
• Now go to the command prompt and address the folder where you want to install SASS.
• After that, you have to create a package.json file. It manages the dependencies of our project.
• Use the command written below that will ask for the package name of the user’s choice and the description. Some more formalities are there, just press enter for that and your package.json file will be created.

npm init

Step 2: Now to install SASS one simple command is used:

npm install node-sass --save

Note: – –save in the above command is used to save the SASS in dependencies of JSON file. Now SASS has been installed in your system successfully.

Step 3: To work with SASS, go to the package.json file in your project, i.e. if you are working with VSC, open your project there and then open the package.json file.

You will get a package.json file like:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "author": "",
    "license": "ISC"
}

Remove the “test” script and add your own script of name compile: sass(any other name can be chosen), give the link of your sass file as a target. package.json should look like this:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "compile:sass": "node-sass scss/style.scss css/style.css"
    },
    "author": "",
    "license": "ISC"
}

Now go back to the command prompt and run the command:

npm rum compile:sass

Or just add a node-sass script like this:
Open the package.json file in your text editor of choice, and add the following line inside the “scripts” object:

"scss": "node-sass --watch assets/scss -o assets/css"

package.json file looks like this:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "scss": "node-sass --watch assets/scss -o assets/css"
    },
    "author": "",
    "license": "ISC"
}

Save the file and close it. Now, in the root of the project directory, run the command (as given below) to start watching for any changes to your .scss files.

npm run scss

Approach:

• Write the SASS code.
• Compile the SASS code into CSS code using the command sass style.scss result.css. The first filename (style.scss) is the scss file that is to be compiled and the second file name (result.css) is the processed CSS file, to be included/attached in the HTML document.
• Include the compiled CSS file in the Html file.

Now see how to make effective use of the important features of SCSS like variables, nesting, mixins, and operators.

• The main HTML file is named index.html
• SCSS file is style.scss and the CSS file is result.css
• Command to compile the SCSS file: sass style.scss result.css

Example: The below example describe the SASS code which is converted to a CSS file, which is then utilized in the index.html file.

SASS Code(style.scss):

$bg: #909290;
$textColor: #ffffff;
$align: center;
$font: sans-serif;
$decoration: none;
$text: green;
body {
    background: $bg;
    color: $textColor;
    text-align: $align;
    font-family: $font;
}
h1 {
    color: $text;
}
a {
    text-decoration: $decoration;
    color: $text;
}

CSS Code(result.css):

body {
    background: #454745;
    color: #ffffff;
    text-align: center;
    font-family: sans-serif;
}
h1 {
    color: green;
}
a {
    text-decoration: none;
    color: green;
}

<!DOCTYPE html>
<html>

<head>
    <title>SASS Tutorial</title>
    <link rel="stylesheet"
          href="result.css">
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>SASS</h3>
    <p>This example illustates the use of 
        <a href=
"https://www.geeksforgeeks.org/sass-introduction/">SASS
        </a>
    </p>
    <p>
        <a href="https://www.geeksforgeeks.org/">
              GeeksforGeeks
          </a>
        - A Computer Science portal for geeks.
    </p>
</body>
</html>

Output:

 

Advantages of SASS:

• Using SASS, we can write clean, well-structured & organized having less CSS in a programming construct.
• It is more powerful, stable & elegant which helps the developer to design & work efficiently, as it is compatible with all the CSS versions.

Disadvantages of SASS:

• In order to work with SASS & utilize it in the code, code must be compiled.
• Some of the browser’s built-in element inspectors may not work properly while working with the SASS.
• SASS has more complex syntax in comparison to the other preprocessor & normal CSS syntax.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above