To begin, please download these files and open the whole folder up in Atom or another editor of your choice.
The files are a sample SASS-based project. There’s only 1 HTML file, but there are a bunch of SASS files. The aim of this is to demonstrate a few of the most common, useful, and easily learnable SASS concepts.
Sass Partials
This SASS setup in this sample is modelled on some common practices. The WordPress underscores starter theme, for example, uses a fairly similar partials and variables setup.
If you look in the SASS folder here, you’ll see one main file called style.scss, and a bunch of folders:
If you look into that style.scss file, you will see a number of @import statements:
/* 1. RESET ======================================= */ @import 'reset/normalize'; // VARIABLES ======================================== @import 'variables/variables'; @import 'mixins/mixins'; /* 2. TYPOGRAPHY ==================================== */ @import 'typography/typography'; /* 3. NAVIGATION ==================================== */ @import 'navigation/navigation'; /* 4. MEDIA ======================================= */ @import 'media/media'; /* 5. LAYOUT ======================================= */ @import 'layout/layout'; /* 6. FORMS ======================================= */ @import 'forms/forms'; /* 7. MODULES ======================================= */ @import 'modules/modules';
An @import statement will import into a sass file another type of sass file: a partial.
SYNTAX: Partials are named with an underscore at the front, but when they are imported, the underscore and the extension are both omitted. If the partials are in folders, as in the example files, the folder must be part of the @import path.
The name illustrates the purpose of this type of file: it is a part of your overall styling strategy. Partials allow us to break our styling efforts down into modules. We write the partials as separate files but then SASS compiles them into one file.
“Regular CSS” does in fact have an @import directive. They used to be quite popular. However, there are many advantages to the sass @import over the traditional css @import statement.
The most important is that having a single sass-compiled stylesheet delivered to the browser gives significant performance advantages (because the compiled css file represents a single http request).
Another is that it’s easier to edit our code if our css tasks are divided into numerous scss files rather than authored in one css file: it’s easier to find, say, video-related code in a partial named _video.scss than it is to find the video-related css in a file containing all the css for the site. ( The styles in a complex site can often into thousands of lines. )
Let’s turn our attention back to the style.scss file in the sample files you downloaded.
The first partial I’m importing here is a long and famous stylesheet called normalize. Normalize is what’s known as a reset stylesheet. These kinds of stylesheets are designed to neutralize (or, normalize) the differences between browsers so that your design can hopefully render as closely as possible in different browsers.
You can get normalize at https://necolas.github.io/normalize.css/
Normalize, for example, is used in common developer frameworks like Twitter Bootstrap, HTML5 Boilerplate, etc.
For more about normalize: https://nicolasgallagher.com/about-normalize-css/
(It’s an interesting read, actually.)
Since normalize “resets” browser styles, it should be the first imported partial (so it doesn’t overrule styles you write).
Organization of Partials
As noted above, you will see a number of subfolders in the SASS folder. For example, in the MEDIA folder I have a partial for images, one for videos, and another for galleries.
I also have in the MEDIA folder a _media.scss partial. If you look in all the other folders, you will see a partial file with the same name as the parent folder (not including the file extension, of course).
This scheme, which is used in the underscores wordpress starter theme, is for organizational purposes.
Typically, each of these special partials will have import statements for all the other partials in its folder.
Then the main SCSS file (in our case style.scss) will import only the “special” partials.
So _media.scss will import _images.scss, _galleries.scss, and _video.scss.
In turn, _media.scss will be imported into style.scss.
This pattern, then, will repeat for all or most of the sass subfolders in our project.
This is not a mandatory pattern by any means, but it is definitely a useful and common way to organize your styles, as it sets up an easily-understood modular import chain.
As an aside, it might make more sense to you to import the variables file before normalize. That’s fine. The main thing here is to make sure that you import your variables partial before you import any partials that refer to any of the variables. SASS will throw an error if you use a variable before declaring it.