How to Use Sass with CSS?
Last Updated :
30 Jul, 2024
SASS (Syntactically Awesome Style Sheets) is a pre-processor for CSS that provides various features such as nesting and mixins. SASS compiles to regular CSS and that CSS is used in your project and finally by the browser to style the web page.
How SASS Works?
Let's understand how Sass works:
- The SASS code is written in the files with .sass or .scss extension based on the syntax preference.
- You can use various features like variables, mixins, and nesting in Sass.
- SASS pre-processor processes the SASS code into standard CSS code in a new CSS file.
- This CSS code is the actual code that is being used by the HTML and rendered by the browser.
Why use SASS?
Let's understand why developers prefer Sass:
- Reduced repetition: Sass provides mixins feature which allows reuse of similar properties to any selector.
- Increased Maintainability: The code in SASS is nested and easier to understand and maintain due to it resembling the hierarchy of the browser.
- Powerful Features: It provides various features such as for loops, mixins, functions etc which are used for cleaner, efficient and maintainable code.
Steps to install and run SASS
The following steps provides the way of installing Sass using npm:
Step 1: Download NodeJS
Download and install Node.js from the official site. The installer will also install the npm command. To verify the presence of npm use the npm command along with the version flag as shown below.
npm -version
Step 2: Install SASS
Install the SASS package globally so that you can use it in all your projects without manually installing it.
npm install -g sass
Step 3: Watch SASS
Use the SASS command to watch or generate the CSS code from the SASS code. The command also generates a file_name.css.map file which is a source map used by browsers for generated CSS code from the SCSS code.
sass file_name.scss any_name.css
Alternatively you can use the watch option to generate the CSS code every time any changes made to the SASS file.
sass --watch file_name.scss any_name.css
How to use SASS with CSS
The below example shows a SASS file having both the basic CSS syntax and additional features of SASS. Create a HTML file named as index.html and a SASS file name as input.scss. Paste the following code into these file then run the watch SASS command explained above to create the CSS file but if you want to change the name then do not forget to change the name in the link tag in the HTML file.
Example: The below code will show how you can use SASS with CSS.
HTML
<!-- index.html file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>
Use Sass with CSS
</title>
</head>
<body>
<main>
<div class="heading">
Hey Geek, <br />
Welcome to GFG!!
</div>
<p>
Use Sass with CSS
</p>
</main>
</body>
</html>
// output.scss file
@mixin basic-styles($size) {
font-size: $size;
padding: $size;
border-radius: $size + 10rem;
}
$primary-color: lightgreen;
body {
background-color: $primary-color;
}
main {
display: flex;
flex-direction: column;
align-items: center;
.heading {
@include basic-styles(3rem);
color: white;
background-color: darken($primary-color, 40%);
}
p {
@include basic-styles(2rem);
background-color: white;
color: darken($primary-color, 40%);
}
}
/* Generated CSS code */
body {
background-color: lightgreen;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
main .heading {
font-size: 3rem;
padding: 3rem;
border-radius: 13rem;
color: white;
background-color: #189a18;
}
main p {
font-size: 2rem;
padding: 2rem;
border-radius: 12rem;
background-color: white;
color: #189a18;
}
Output:
Similar Reads
Why to use SASS instead of CSS ? SASS (Syntactically Awesome Style Sheet) is a CSS preprocessor. It is a scripting language that is compiled into regular CSS, allowing you to use features such as variables, nested rules, and mixins in your stylesheets. It adds additional features and functionality to CSS. SASS can help to make your
6 min read
Why to use SASS instead of CSS ? SASS (Syntactically Awesome Style Sheet) is a CSS preprocessor. It is a scripting language that is compiled into regular CSS, allowing you to use features such as variables, nested rules, and mixins in your stylesheets. It adds additional features and functionality to CSS. SASS can help to make your
6 min read
How to use Sass Variables with CSS3 Media Queries ? SASS Variables: SASS Variables are very simple to understand and use. SASS Variables assign a value to a name that begins with $ sign, and then just refer to that name instead of the value. Despite this, they are one of the most useful tools SASS provides. SASS Variables provide the following featur
3 min read
How to use Sass Variables with CSS3 Media Queries ? SASS Variables: SASS Variables are very simple to understand and use. SASS Variables assign a value to a name that begins with $ sign, and then just refer to that name instead of the value. Despite this, they are one of the most useful tools SASS provides. SASS Variables provide the following featur
3 min read
How to use SCSS mixins with angular 7? When working with the Angular CLI, the default stylesheets have the .css extension. Starting an Angular CLI Project with Sass Normally, when we run ng new my-app, our app will have .css files. To get the CLI to generate .scss files (or .sass/.less) is an easy matter. Create a new project with Sass w
5 min read
How To Customize Bootstrap With Sass? Bootstrap is one of the most popular CSS frameworks used to develop responsive websites quickly. However, using the default Bootstrap design can result in many websites looking the same. This is where Sass (Syntactically Awesome Style Sheets) comes in handy. By customizing Bootstrap with Sass, you c
4 min read