SCSS @import, import sub files in CSS

— 3 minute read

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

SCSS uses a DRY (Don't Repeat Yourself) methodology. And one way to help with this is to separate code in 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 ofcourse 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 we used as follows:

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

This gives our project way more clarity and organise 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