Sass Import
We can follow CSS progress by following the development of its pre-processors. Which preprocessor to use is a different time theme, 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 and that 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 import feature or Sass at all, you need to set Sass on your project for which sass guide will presumably 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 name of the scss file. The scss file you can define without .scss extension and it will work.
@import "colors";
@import "fonts";
@import "buttons";
@import "forms";
or short form:
@import "colors", "fonts", "buttons", "forms";
In this example, scss file with this code can use all styles defined in 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 named this way are called partials in Sass terminology. The rule about import without 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 like expected.
Extra
Just to be sure it's clear, with 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 in the corresponding place from the current file will be compiled.
Closing Word
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 make so....
For more about Sass and CSS features soon subscribe to our newsletter.
Creating
software solutions
that work
