SASS

SASS (Syntactically Awesome Style Sheets) is a powerful and popular CSS preprocessor that extends the capabilities of standard CSS. It offers numerous features such as variables, nested rules, mixins, and functions, making CSS more maintainable, reusable, and easier to write. Sass files are compiled into standard CSS for browser interpretation. SASS helps streamline your workflow and keeps your stylesheets organized and efficient.

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

What is SASS?

SASS (Syntactically Awesome Style Sheets) is a powerful and popular CSS preprocessor that extends the capabilities of standard CSS. It offers numerous features such as variables, nested rules, mixins, and functions, making CSS more maintainable, reusable, and easier to write. SASS helps streamline your workflow and keeps your stylesheets organized and efficient.

Why Use SASS?

• Variables: SASS allows the use of variables to store values such as colors, fonts, or any CSS value you need to reuse. This makes it easy to maintain and update styles across a project.
• Nesting: SASS supports nesting of CSS rules, which follows the same visual hierarchy of HTML. This makes your CSS more readable and maintainable.
• Partials and Imports: You can break down your CSS into smaller, modular pieces using partials and import them into a main stylesheet. This modular approach keeps your code organized.
• Mixins: Mixins allow you to create reusable chunks of CSS, avoiding repetitive code. You can pass variables to mixins for dynamic styling.
• Functions and Operations: SASS provides built-in functions and the ability to define your own, enabling complex calculations and transformations directly within your stylesheet.
• Inheritance: The @extend directive allows you to share a set of CSS properties from one selector to another, promoting DRY (Don’t Repeat Yourself) principles.

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

Installation Step

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.

<!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>

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

body {
  background: #454745;
  color: #ffffff;
  text-align: center;
  font-family: sans-serif;
}

h1 {
  color: green;
}

a {
  text-decoration: none;
  color: green;
}

Output:

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