Sass - Import Directives

Description

Import directives, imports the SASS or SCSS files. It directly takes the filename to import. All the files which are imported in SASS will get combined in a single CSS file. There are few things that are compiled to a CSS when we use @import rule −

File extension .css
Filename begins with http://
Filename is url()
@import consist any media queries.

For example, create one SASS file with the following code −

@import "style.css";
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

sass --watch C:\ruby\lib\sass\style.scss:style.css

The above code will be compiled to the CSS file as shown below −

@import url(style.css);
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

The following are the ways to import files using @import rule −

Partials

Partials are SASS or SCSS files, which are written using underscore at the beginning of the name (_partials.scss). The partial file name can be imported in SASS file without using the underscore. SASS does not compile the CSS file. By using the underscore, it makes SASS understand that it is partial and should not generate the CSS file.

Nested @import

The @import directive can be included inside the @media rules and CSS rules. The base level file imports the content of the other imported file. The import rule is nested at the same place as the first @import.

For instance, create one SASS file with the following code −

.container {
   background: #ffff;
}

Import the above file to the following SASS file as shown below −

h4 {
   @import "example";
}

The above code will be compiled to the CSS file as shown below −

h4 .container {
   background: #ffff;
}

Syntax

Given below is a syntax, used to import files, in the SCSS file −

@import 'stylesheet'

Example

The following example demonstrates the use of @import in the SCSS file −

import.htm

<html>
   <head>
      <title>Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body class = "container">
      <h1>Example using Import</h1>
      <h4>Import the files in SASS</h4>
      <ul>
         <li>Red</li>
         <li>Green</li>
      </ul>
   </body>
</html>

Next, create file _partial.scss.

_partial.scss

ul{
   margin: 0;
   padding: 1;
}

li{
   color: #680000;
}

Next, create file style.scss.

style.scss

@import "partial";
.container {
   background: #ffff;
}

h1 {
   color: #77C1EF;
}

h4 {
   color: #B98D25;
}

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

sass --watch C:\ruby\lib\sass\style.scss:style.css

Next, execute the above command; it will create the style.css file automatically with the following code −

style.css

ul {
  margin: 0;
  padding: 1; }

li {
  color: #680000; }

.container {
  background: #ffff; }

h1 {
  color: #77C1EF; }

h4 {
  color: #B98D25; }

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in import.html file.
Open this HTML file in a browser, an output is displayed as shown below.

sass_rules_and_directives.htm