SASS @import Rule - How to Use This SCSS Directive?

1. What is @import Rule in SASS?

Primarily, the @import rule is originally available in CSS language, SASS only extends this directive to bring in CSS and SASS files. In this way, all the SCSS modules and functions within a file are readily accessible within the current document using @import rule or directive.

This tutorial encompasses all the facts to implement and use the @import rule in our SCSS files. Further, what are the complications that can occur using this directive. Also, we will analyze how to find the files and different methods to load them in our SCSS project. Moreover, we will be working on how to incorporate nesting for this @import directive in SCSS stylesheets. And finally, we will talk about some differences between SASS and CSS @import directive and how to include modules in our projects.

1.1. Syntax of SCSS @import Rule

The syntax of the @import directive in SCSS programming is very similar to the CSS rule. Below is a simple syntax to take in another SASS document in the SCSS stylesheet.

@import 'src/code', 'src/base', ...;

The indented type SASS syntax does not need quotes and semi-colon.

@import src/code, src/base, ...

2. How to Use @import Directive in SASS?

As you know the usage principle of CSS import, in a likewise manner we use SASS @import rule. Let us understand this with an example.

.main-heading{
	margin: 20px 20px 20px 10px;
	color: #2a73cc;
	font:{
		family: 'Roboto Slab';
		weight: 900;
		size: 24px;
	}
	text:{
	align: center;
	transform: uppercase;
	}
}

@import 'base/heading';

.main-heading {
	margin: 20px 20px 20px 10px;
	color: #2a73cc;
	font-family: "Roboto Slab";
	font-weight: 900;
	font-size: 24px;
	text-align: center;
	text-transform: uppercase;
}

2.1. Explanation

• In the preceding example, we developed a file heading.scss in the base directory.
• Next, we wrote our styles for the .main-heading class in that document.
• Further, in our main style.scss, we used the @import directive to get those style declarations in style.scss.
• In the CSS code tab, you can see the final CSS output.

3. What are Problems with @import Directive?

As the SASS documentation says, they are continuously discouraging the use of the @import directive in SCSS stylesheets. The reason to do this has certain factors.

• The SCSS developers are planning to get rid of the @import rule in a few years.
• Therefore, as a replacement for the @import rule, they are encouraging SASS developers to incorporate the @use directive.
• However, the @use rule is only available for Dart SASS implementation at present.
• So, in the meantime, the users of Ruby and LibSASS must continue the use of the @import directive.

3.1. Problems With @import

There are several critical issues in employing the @import directive in our SASS stylesheets.

• When we load a SASS document using the @import directive, all of its variables, mixins, and functions are approachable globally.
• The imported SASS modules appear as they were defined within the current file.
• The global access to all the members makes it harder for libraries and forces them to prefix all the members.
• This is done to avoid naming similarity.
• Further, the working of the @extend rule is also troubled as they are also global.
• Also, the @import rule generates the CSS output each time we transpile the SASS file.
• Moreover, the private members and placeholder selectors are also not accessible to downstream stylesheets using the @import directive.
• Thus, the @use rule addresses all the above issues and is accordingly proposed exceptionally by the SASS community.

4. Finding The File Using @import

SASS made it trouble-free for us to locate and load the document we require using the @import directive. Therefore, we don't have to write absolute URLs for our files. SCSS algorithm for the @import rule is much more powerful and it will automatically load the exact file even if you don't append the extension. Hence, the lib/main.scss, lib/main.sass, or lib/main.css will automatically load if we use the @import directive.

4.1. Load Path

All the implementations of SASS have this feature to load the path of our stylesheet. This path will be utilized by the parser upon resolving imports. Therefore, if we include the path lib/src/main/sass, we can write the @import 'fonts'; to include the lib/src/main/sass/fonts.scss stylesheet.

4.2. SASS @import Partials

In this method, SASS allows us to make stylesheets that are only formulated for import purposes only. Therefore, if we prepend an underscore _ before the name of the stylesheet, the SASS transpiler will automatically know to leave it for importing purposes and not for compiling. Hence, these files are called SASS @import partials. The lib/_fonts.scss and lib/_colors.scss are the examples of SASS partials.

4.3. Index Files

The following list beautifully speaks about the loading of stylesheets using the index file method in SASS.

• Suppose we make a folder named the library and create a file in it as _index.scss.
• We also create two other files in that folder named _fonts.scss and _colors.scss.
• Then we load the files in the index file as @import 'fonts', 'colors';.
• Now, whenever we want to access those two stylesheets, if we load the folder i.e @import 'library';, it will definitely load the index file automatically.
• And correspondingly include the other two documents within the index file.

4.4. Custom Importers

There are a lot of SASS implementations and all of them have set up a way to define custom importers. Thus, it tells the parser how to search for files using the @import directive in SCSS.

• Node and Dart on NPM have an importer option included in their JS API.
• The Dart SASS implementation on Pub has an abstract custom class to work with custom importers.
• Ruby SASS contains an abstract Importers::Base class for custom importers.

5. Nesting of @import Directive in SCSS

• As we know the default behavior of @import directive from CSS language i.e. we include them at the top of the stylesheet.
• However, it is not important and we can obtain the SCSS stylesheets using the @import directive within the rules also.
• In this scenario, the imported CSS style rules will be nested under that rule,
• Hence, this technique is beneficial for us as sometimes we want to load styles for only certain HTML elements or media queries,
• Therefore, the nesting method can direct the input stream of styles to selective style rules or elements in SCSS,
• However, the top-level mixins, functions, and variables inside the imported file are still accessible globally.

Consider the following instance in which we used the @import rule in our SCSS file style.scss. The included file is nested under the style rule .home-page. See the outcome in the adjacent CSS code tab.

@function width($widths...) {
	$sum: 0;
	@each $width in $widths {
		$sum: $sum + $width;
	}
	@return $sum;
}
.main-wrapper{
	$color: #2a73cc;
	$border-radius: 5px;
	$width-img: 200px;
	$width-content: 500px;

	width: width($width-img, $width-content);
	background: $color;
	padding: 20px;
	border-radius: $border-radius;
}

.home-page{
	@import 'base/wrapper';
}

.home-page .main-wrapper {
	width: 700px;
	background: #2a73cc;
	padding: 20px;
	border-radius: 5px;
}

6. Difference Between SCSS & CSS @import Rule

Although, the @import rule works for both SCSS Script and CSS Programming. However, there are some differences in usage methods. The underneath list contains the dissimilarity of @import directive between SASS and CSS.

• CSS can load one file at a time, however, SASS can have more than one stylesheets in one declaration.
• CSS imports take browsers' help to make multiple HTTP requests, but SASS loading is handled entirely during transpilation by the compiler.
• It is compulsory in CSS to append the file extension while using the @import directive whereas, SCSS encourages not to suffix the extension.
• Further, the SASS modules and features display errors with the @import rule when we write SCSS code in the CSS file.
• Lastly, the CSS including technique can use interpolation whereas SASS cannot.

6.1. SASS As a Superset of CSS

Moreover, in order to make things easy and truly support the CSS language, SCSS can import any CSS document with the below path features.

1. The file URL ending with extension file-name.css.
2. Using the http or https at the start of the URL.
3. The url(file-url) method, where the file URL goes within braces.
4. Media queries within the imports.

1- @import url(file-name.css);
2- @import "http://fonts.googleapis.com/css?family=Roboto+slab";
3- @import url(file-name);
4- @import "landscape" screen and (orientation: landscape);

7. How to Import Modules in SASS?

The working of SASS is quite efficient using the @import rule with all the imported modules. There can be the following possibilities when you import a file using this directive.

• The SASS file that imports will have access to all the modules of the imported file that contain @use directives defined within that file.
• But, if there are modules that are loaded from some other file into the file which we import, those modules are not obtainable.
• However, if those modules in the importing file are loaded with the SCSS @forward rule, then those members and modules will be readily available.
• Hence, we can load a library that was coded to work with the module system.
• Moreover, if there are CSS style declarations within the imported SCSS file, those will load even if they are loaded earlier by another @import directive.

7.1. SASS Import Only Files

• The @use prepend all the members of the file with namespace.
• But the @import rule in SCSS does not allow namespaces.
• Hence, there is a special type of files in SASS that are permitted to work only with the @import rule.
• It means that we cannot obtain those files by employing the @use rule.
• The structural name of the file is something like file-name.import.scss.

7.2. Configure Modules Using SCSS @import Directive

There is a chance that we can configure the modules after importing a file. The subsequent example, for instance, has a file _core-modules.scss and forward its modules using the @forward rule. Lastly, in the style.scss file, the @import directive configures the desired modules.

$color: black !default;
$font-family: 'Arial', sans-serif !default;
$padding: 0 !default;

@forward 'core-modules' as core-*;

$core-color: #2a5522;
$core-padding: 20px
@import "core-modules";