SCSS @import, import sub files in CSS

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 permalink

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 permalink

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 permalink

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 permalink

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! permalink

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