SASS @import Directive

SASS @import Directive

@import directive is used to import the sass or scss files. It directly takes the filename to import. Suppose you have two scss first file is A.scss and second file is B.scss and you want to import A.scss into B.scss.

You can see below example;

 html,  
body,
h1,
ul,  
ol {  
   margin: 0;  
  padding: 0;  
}  

@import 'A';  
body {  
  font: 100% Helvetica, sans-serif;  
  background-color: cyan;  
}

Note: If the extension of the file is .scss or .sass the file will be imported. If there is no extension sass will try and find a file that matches the name and the proper extension. Syntax to import:

  
@import "demo.scss";

@import "demo";

html, body, h1, ul, ol {  
  margin: 0;  
  padding: 0;  
}  
body {  
  font: 100% Helvetica, sans-serif;  
  background-color: cyan;  
}