[go: up one dir, main page]
Open In App

SASS

Last Updated : 13 Jun, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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

Features of SASS

  • SASS is CSS-compatible i.e. it is fully compatible with every version of CSS.
  • It supports the various extensions 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 in 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

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.

index.html 
<!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>
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;
}
result.css 
body {
  background: #454745;
  color: #ffffff;
  text-align: center;
  font-family: sans-serif;
}

h1 {
  color: green;
}

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

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.


H
hardiksm73
Improve
Previous Article
Spectre CSS
Next Article
LESS

Similar Reads

Sass sass:list Module
SASS provides many built-in modules that contain various useful functions and some mixins that makes it easy to use. All built-in modules begin with sass: to show that they are different from other modules and a part of SASS itself. One of the built-in modules is the sass:list module that makes it possible to access and modify values in a list. Not
4 min read
Sass sass:color Module
SASS provides many built-in modules that contain various useful functions and some mixins that makes it easy to use. All built-in modules begin with sass: to show that they are different from other modules and a part of SASS itself. One of the built-in modules is the sass:color module. This module is used in order to create new colors from the exis
3 min read
Sass | sass:map module
The sass:map module gives functions that makes it possible to look up the values associated with the key of a map. Some of the major functions are listed below: map.get(): This function returns the value associated with the given key in the map. In case, no value is associated then it returns null. Syntax: C/C++ Code map.get(map, key) map-get(map,
2 min read
SASS sass:string Module
The sass:string module makes it easy to combine, search, or split strings apart. The following are the list of functions that can be used using this module. 1. string.quote() function: This function returns a quoted string. Syntax: string.quote(string) quote(string) Example: @debug string.quote(GeeksForGeeks); @debug string.quote(&quot;GeeksForGeek
3 min read
What is the role of @media directive in SASS ?
SASS stands for Syntactically Awesome Style Sheet. It is basically a CSS preprocessor that helps us to reduce the repetitions in the CSS code and also helps to reduce the complexity of CSS code. SASS makes the code easy to understand using different features like mixins, variables, and so on. One such important feature of SASS is the @media directi
2 min read
How to create optional arguments for a SASS mixin?
To create optional arguments for a SASS @mixin, the mixin declared must be passed and it should be included. The following approach will explain clearly. Syntax: @mixin function-name($var1, $x:val){ /* stylesheet properties */ } @include function-name(value, 0); Approach: Assigning Null in @mixin includes We can make an argument of mixin optional b
2 min read
Sass @function Rule
Functions can define complex operations on SassScript values that can be reused throughout the stylesheet. It makes it easier to abstract out the common formulas and behaviors in some readable way. Functions can be defined using @function at-rule. Syntax: @function &lt;function name&gt;(&lt;arguments...&gt;) { ... } A function name can be any Sass
2 min read
Foundation CSS Callout Sass Reference
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS.
3 min read
CSS Preprocessor SASS
The SASS is the abbreviation of Syntactically Awesome Style Sheets. It is a CSS pre-processor with syntax advancements. The style sheets in the advanced syntax are processed by the program and compiled into regular CSS style sheets, which can be used in the website. It is a CSS extension that allows to use feature like variables, nesting, imports,
3 min read
How to calculate percent minus px in SASS ?
Calculating the difference between percent and px is not as simple as 50% - 30px. Obviously you'll be getting incompatible unit error. This is because SASS cannot perform arithmetic operations on values that cannot be converted from one unit to another. SASS does not know exactly how wide a "percentage (%)" is in terms of pixels or any other unit.
2 min read
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox