How to Use Sass import Rule to Combine SCSS/CSS Stylesheets Altogether

Learn everything about Sass import with a mini project

Published in

The Startup

4 min readJan 8, 2021

Unity is strength. It also goes with Sass. In CSS import, the browser sends separate HTTP requests for each CSS file which causes poor performance. But in Sass, all the files are concatenated into one file and only one request is sent to the server which improves performance.

You want to be Pro in Sass and CSS ?? Then, it’s mandatory to know how Sass @import works.

Let’s see What we will be learning today

What is Sass @import?
The necessity of Sass import
Difference between CSS import and Sass import
How to use Sass
Sass partials
Importing CSS file
A mini project on Sass @import

What is Sass @import?

I call it “combination” because it combines multiples files into one file.

Sass import is used to import sass and CSS stylesheets into one file. Using many stylesheet files makes code lengthy and also difficult to manage. So, Sass @import is used to separate files into smaller parts and import them later when needed.

The necessity of sass import

We can put our colors, variables, mixin, and other styles in different files and import them on the main style file.
Using Sass import makes our code modular and also code becomes easy to manage

Difference between CSS import and Sass imports

How to use sass

we can import any CSS/sass file in this way

import "design.sass"

Even, we can import multiple files by separating them with a comma

@import "design.scss","about.css";

From sass documentation, we know that,

“Any mixins, functions, and variables from the imported file are made available, and all its CSS is included at the exact point where the @import was written. What’s more, any mixins, functions, or variables that were defined before the @import (including from other @import) are available in the imported stylesheet.”

So position matters while importing Sass.

In sass writing the file, an extension isn’t necessary. @import “design” will automatically load design.css/design.scss/design.sass

Sass Partials

As we all know, managing large stylesheets is sometimes more daunting than a horror movie. To escape, we break it into multiple files. Those small files are called partials. We write different styles in those files and import them when needed.

We rename partials with the preceding underscore. Example fo partial file names are such as _design.sass, _style.sass, _about.sass

The file which imports a partial is called a manifest file. So we can say that the manifest file imports a partial.

Importing CSS file

We can easily import CSS files in the sass file. But it is forbidden not to include the .css extension in the import statement.

But the saas team discourages the use of the @import Rule. Sass team encourages the use of @use rule instead which is available in dart sass.

A mini Sass project with @import

Let’s now build a page that shows us a list of some programming language using sass import so that we can apply what we have learned. As we all know

Knowledge is useless unless it is used

So, first, we create the index.html file

index.html

After creating the index.html file, we create two partials

mixins.scss

In _variables.scss i used Sass Variables. IF you don’t know what sass variable is, then read this article

_variables. scss

Now we can import them in style.scss file and write CSS to style our document. As we have imported _variables.scss and _mixins.scss we can now use them in our style.scss file.

style.scss

We imported two partial in our main CSS file and all the code is available in style.scss a file because we imported them. That’s the reason we could use variables and mixins in style.scss

Let’s look at the final CSS file how it looks like

style.css

That’s how the Sass import works. Maybe you are a beginner at Sass. Don’t be confused by Sass. It may look messy at first, but believe me, it’s fun to write Sass. Keep learning.

Now, Let’s see the output of our project