Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Sass Import

DZone's Guide to

Sass Import

In this post, we take a look at the CSS preprocessor, Sass, and how to use SCSS code to import external files into your web app.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

We can follow the progress of the CSS language by following the development of its preprocessors. Which preprocessor to use is a discussion for a different time, but it's really necessary to use one because they allow features that don't exist in CSS yet (we have also written about the ones that exist though, e.g. columns, underline, font size).

One of the preprocessors is Sass and one of these extra features is import, which is the theme of this post. My next post is the export feature, so you'll have something to look forward to.

Before you can use the import feature or Sass at all, you need to set up Sass in your project, to which end the Sass guide will help.

@import

The import feature works pretty much as expected. You can import a .scss file in another one, and all the variables in it will be available. The syntax is @import and the name of the SCSS file. You can define the SCSS file without the .scss extension and it will work.

 @import "colors";
 @import "fonts";
 @import "buttons";
 @import "forms";

Here's the short form:

 @import "colors", "fonts", "buttons", "forms"; 

In this example, the SCSS file with this code can use all the styles defined in the colors.scss , fonts.scss, btn_styles.scss and form_styles.scss files in the current directory. The content of these files will replace the @import statement.

Partials

Sass compiles all the .scss or .sass files inside the directory it's watching. If you don't want to compile it directly you don't need to.

You can tell Sass not to compile a file with the file's name. If you add an underscore to the start of the file name, Sass won't compile it. So, if you don't want colors.scss to compile to colors.css, name the file _colors.scss instead. Files that are thusly named are called partials, in Sass terminology. The rule about using import without an extension works here too.

Partials are used as general style files (reset, colors, fonts, typography, navigation, forms, buttons, grids, figures, header, sidebar, footer...) and other files usually work as page styles.

Nested @import

We have already written about nesting and how important it is in CSS pre-processors.

Even if it's typical to include your @import statements at the top of the importing file, you can nest @import wherever. The example which follows will explain the second most common usage of this feature.

_background.scss

 div{
     background-color:#ababab;
 }

homepage.scss

 section{
     @import "background";
 }

Assuming the two files are located in the same folder, the code would compile to (homepage.css):

 section div{
     background-color:#ababab;
 }

So you can import the partial file directly inside the block of code, and it's going to be compiled just as expected.

Extra

Just to be sure it's clear, when defining the file to import, it's possible to use all folders' common definitions.

Example 1:

 @import "style/*" 

This way all the files in the style folder will be compiled.

Example 2:

 @import "../../style/buttons" 

This way buttons.scss from the current file will be compiled.

Closing Words

If you're using Sass, you better make a good structure for your stylesheets, because it's almost all about that. The structure without @import in Sass is impossible to do well.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,css ,sass ,css preprocessor

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}