Subscribe

SCSS @import, import sub files in CSS

✍️

Today we are learning how to import SCSS partials and files.

30 Jul, 2020 · 2 min read

To get cracking with SCSS, I think a good and maybe the most helpful starting point is @import.

SCSS uses a DRY (Don’t Repeat Yourself) methodology. And one way to help with this is to separate code into specific files and folders.

Some files you can split up are: reset, variables, colors, fonts, etc.

SCSS Import Usage

To use the @import, we use the following syntax:

@import 'variables';

As you can see, we don’t use an extension.

We can of course also import multiple files this way:

@import 'reset';
@import 'variables';
@import 'fonts';

How SCSS Import Works

So let’s say we have a reset like such:

reset.scss

* {
  margin: 0;
  padding: 0;
}

And then our main.scss.

@import 'reset';

body {
  color: #333;
  background: #efefef;
}

This will result in the following main.css.

* {
  margin: 0;
  padding: 0;
}

body {
  color: #333;
  background: #efefef;
}

Using SCSS Partials

One powerful aspect is the use of partials. You have to keep in mind SCSS will compile the normal SCSS files. But if we start our files with an underscore like: _reset.scss it will not be compiled directly.

To use a file, let’s say _variables.scss, we can do the following:

@import 'variables';

body {
  font-size: $defaultFontSize;
}

As you can see, we don’t include the underscore in our import.

Making use of Folders

Another thing we can do is use folders like such:

base/_reset.scss base/_fonts.scss component/_buttons.scss component/_dropdown.scss

These can be used as follows:

@import 'base/reset';
@import 'base/fonts';
@import 'component/buttons';
@import 'component/dropdown';

This gives our project way more clarity and organises our code.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Modifying an SVG path with CSS

10 Dec, 2022 · 2 min read

Modifying an SVG path with CSS

Animate an SVG path with CSS

9 Dec, 2022 · 2 min read

Animate an SVG path with CSS

Join 2097 devs and subscribe to my newsletter