Updated March 28, 2023
Introduction to SASS Import
SASS stands for Syntactically Awesome Style Sheet which is a css pre-processor that provides a feature to your stylesheet mark-up to make the writing styles in different ways.
The @import is a directive in SASS pre-processor which is used to keep associated code in separate files. It allows us to continue code in one file as opposed to keeping the same code over numerous files. The @import directive can be used to import SCSS files in our main file, therefore essentially, we can combine multiple files together.
The @import directive will look for a Sass file to import but, it will compile to a CSS @import rule under the below circumstances:
- The .css will be the extension for a file
- The http:// will be the beginning of the filename
- The url() can be a filename
- The media queries can be used using @import directive
Syntax
The syntax for @import directive in SASS can be written as shown below:
Syntax:
@import mystyle.sass;The above line includes the style sheet into another style sheet by using the @import directive. For instance, let’s take a file as demo.scss with the below code:
Code:
a {
color: blue;
}
body {
font-size: 15px;
background-color: red;
}Now, create another file with the name demo1.scss along with the below code:
Code:
@import "demo.scss";
p {
color: green;
font-weight: 200;
}When you compile the code, you will get the below code with the combination of above both files:
Code: demo2.css
a {
color: blue;
}
body {
font-size: 15px;
background-color: red;
}
p {
color: green;
font-weight: 200;
}Working of Import Directory in SASS
- The import directive enables us to add several styles and can be broken into separate files to import them into one another. In this way, the SASS import directive works speedily to edit the style sheet.
- Different plain CSS imports need the browser to make multiple HTTP requests as it displays your web page, and during the compilation time, Sass imports are handled entirely.
- SASS works on the @import CSS. It does not involve an HTTP request. Instead, it usually takes the file we want to import and integrates it with the file you are importing into, so you can represent the web browser with a single CSS file.
Examples to Implement SASS Import Directory
Below are the examples:
Example #1
To run SASS files, you need to install Ruby for executing SASS programs. Create a file with name sass_import.html with the below code:
Code: sass_import.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Import Example </title>
<link rel="stylesheet" type="text/css" href="import_demo.css"/>
</head>
<body>
<h3>Welcome to EDUCBA... !!!</h3>
<span class="styledemo">
Educba is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain.
</p>
</body>
</html>Now create an scss file with name import_demo.scss and put the below code.
Code: import_demo.scss
html, body {
margin: 0;
padding: 0;
}
.styledemo {
font-size:25px;
background-color: green;
}Put the above both two files in the root folder of the installed ruby folder. Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
Code:
sass --watch import_demo.scss: import_demo.cssOutput:
The above command will create a CSS file and called import_demo.css in the same folder where Ruby is installed. The import_demo.css file includes the below code.
Code:
html, body {
margin: 0;
padding: 0;
}
.styledemo {
font-size: 25px;
background-color: green;
}Output: Now, execute the html file and open in the browser and you will get the below result:
Example #2
In this example, we have used @import directive which imports the content of one file into another file. Let’s create a html file and save the below code as import_demo_example.html.
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Import Example </title>
<link rel = "stylesheet" type = "text/css" href = "sass_import_demo.css"/>
</head>
<body class = "block">
<h2> EDUCBA!!! </h2>
<ul>
<li> Educational consultant... </li>
<li> Provider of skill based education... </li>
<li> finance, software and business skills to achieve professional success... </li>
</ul>
</body>
</html>Now create a file called sass_import.scss with the below code:
Code:
ul{
margin: 0;
padding: 1;
}
li{
color: #82BBDB;
}Next, create css file with the name as sass_import_demo.scss and add the below code to it:
Code:
@import "sass_import";
.block {
background: #26688D;
}
h2 {
color: #B98D25;
}Explanation: In the above file, we are importing a sass-import file which adds its content into in this file when you made changes to the scss file. The @import could include the style sheet inside the other style sheets. The comprised files could either be placed on a similar server or added with a URL to a directory on the alternative server.
Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
Code:
sass –watch sass_import_demo.scss: sass_import_demo.cssNow, execute the file with the above command and it will create the sass_import_demo.css file with the below code:
Code: sass_import_demo.css
ul {
margin: 0;
padding: 1;
}
li {
color: #82BBDB;
}
.block {
background: #26688D;
}
h2 {
color: #B98D25;
}Output: Now, execute the html file and open in the browser and you will get the below result.
Benefit of SASS Import
The main benefit of using the @import directive is, we can merge several files using @import and then compile the main file. Therefore, as a result, we will have only one CSS file and hence, the browser will not have to create more than one HTTP request to load up separate CSS files.
Conclusion
The @import Sass directive is one of the CSS rules which can help to maintain the code and break down the larger files into tiny files and also, facilitates import other files and ultimately one top-level file that will be compiled into CSS. If you are utilizing Sass pre-processor, you will create a good structure for your stylesheets. The structure without @import directive in Sass pre-processor is not possible to do properly.
Recommended Articles
This is a guide to SASS Import. Here we discuss syntax to SASS Import, working off and examples to implement with knowing its benefits. You can also go through our other related articles to learn more –
