When your project grows, you should not put all your SCSS code in the same file. You will have to find some logic to organize your Sass files. Splitting up your code over multiple files and applying the modularization of your code will help you create maintainable and reusable code. In this recipe, you can read about partials. Partials are special Sass files that can be imported in your project, but the partials themselves are not compiled into CSS.
This recipe requires the Compass installed as described in the Installing Compass recipe of this chapter. You can edit the Sass code in your favorite text editor.
The steps beneath will show you that partial file are not compiled into the CSS code:
Create a file structure like the one shown in the following image:
The
main.scssfile should contain the following Sass code:@import 'layouts/grid'; // scss-lint:disable PlaceholderInExtend section.custom { @extend .row; }Write the following code beneath in the
layouts/_grid.scssfile:.row { width: 100%; }Now run the following command in your working directory:
compass compile --forceAfter running the compile command, a new
stylesheets/main.css file will be generated. This file should contain the compiled CSS code, as shown here:/* line 1, ../sass/layouts/_grid.scss */ .row, section.custom { width: 100%; }Finally notice that
layouts/_grids.scssdoes not compiles into a CSS file, because of it is a partial file and only its code is use to generate output in them main file.
Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other Sass stylesheets. Partials are useful for modularizing your code. When you split up your code into different files based on the type of function, you can easily reuse your code. When you modularize your code and use a file's structure with partials that reflects the modularization strategy, it will also be a lot of easier to find the needed code when you have to maintain your applications.
In this recipe, the partial has been imported with the @import directive; you can read more about this directive in the Importing and organizing your files
recipe of Chapter 9, Building Layouts with Sass. Compass compiles all the files in the Sass folder, but ignores partial files starting with an underscore (_). When compiling your code with node-sass, as described in the Using the sass-gulp plugin with Gulp
recipe of this chapter, files starting with an underscore are also ignored by default.
When you compile your project on the command line, you mostly automatically compile only the main file, as the command line compiler only accepts a single input file.
Also, the @extend directive possibly requires some more detailed explanation. You can learn more about the @extend directive in the Utilizing the @extend directive
recipe of Chapter 4, Nested Selectors and Modular CSS. Finally, you should also notice that although the layouts/_grid.scss partial does not generate a compiled layouts/grid.css file, the .row selector declared in this partial outputs in the compiled stylesheets/main.scss CSS file. In the Using placeholder selectors with the @extend directive
recipe of Chapter 4, Nested Selectors and Modular CSS, you will learn how to use the @extend directive, which prevents output in the compiled CSS. Also, mixins, as described in the Leveraging mixins recipe of Chapter 3, Variables, Mixins, and Functions, are not outputted in the final CSS code.
Choosing a strategy to split up or modularize your code is not that easy. In the Applying the OOCSS, SMACSS, and BEM methodologies recipe of Chapter 4, Nested Selectors and Modular CSS, you can read about OOCSS, SMACSS, and BEM; these methodologies help you create modular, reusable, and maintainable CSS code. Applications and web pages are split up into modules and responsibilities, and each of them gets its own partial. Directory structures with partials can reflect your architectural strategy.
Hugo Giraudel, who maintains the Sass Guidelines project, introduced the 7-1 pattern: 7 folders, 1 file. The 7-1 pattern based on SMACSS starts with the following file structure:
Many projects will fit in the preceding structure, but you should realize that architecture is mostly very specific to the project. Depending on your project, you possibly should adapt the 7-1 pattern or even choose a quite different solution.
Giraudel's Sass Guidelines project can be found at http://sass-guidelin.es/.
Vinay Raghu compared different Sass architectures and wrote an excellent blog post about it. You can find his blog post at http://www.sitepoint.com/look-different-sass-architectures/.