Automatic Style Break using SASS

Fasting for people using SASS and solving the problem of optimizing large style files with limited human resources.

Given:

1. A great site with a number of templates 50+.
2. Large style file.
3. The site is constantly evolving, bug fixes, new functionality is being written.
4. Develop and production version in one branch, SVN repository.
5. 1-2 people to maintain this entire farm.
6. A great desire not to go crazy and not to lay hands on yourself!

If you are interested in the end of this epic of mercy, please under the cat
')

Prehistory

Some time ago I got on one big project that three people wrote to me. These people, by the way, came from a terrible tale about an “evil developer” who had never heard of independent blocks, preprocessors and any other optimization. Of course, I couldn’t leave everything that way and began to rewrite everything with incredible enthusiasm. A rewrite, I tell you, was that. All styles were collected in several files, the largest of which consisted of 16k lines. That's just in the process of clearing these Augean stables, and I ran into a problem.

As a moderately lazy person, I got used to giving away routine operations at the mercy of automation and it started with connecting SASS and creating variables, mixins and extents in one global file. As usual, working with SASS on other projects, I compiled a compilation of all styles into one global file through imports. Since this was the most optimal solution when developing the site. But as it turned out, not for production. The combined style file began to weigh 2.5 MB without compression! Split manually and scatter the connection of individual style files across all controllers - it was not an option for me, and I began to think how to make everything so that the machine would suffer for me. This is exactly what I want to introduce you to the product of my thoughts.

The concept is as follows

• Compilation occurs only through global files, in which all compilation parameters and context are configured. In these files, we pass variables that specify values ​​such as:
  
  • context that determines which section of the site we will connect the styles,
  • browser version
  • build version (develop or production),
  • any other variables.
  
  
• At the framework level, a template is created using which global files are generated. One per controller or view, you decide. The context variable and the name in these files is the name of the controller / view. After successful generation, these files are automatically connected to the appropriate controllers / views as css files.
• All style files are wrapped in mixin, which, when compiled, automatically sorts styles according to the specified context variables. If there are several of these variables, you can perform additional sorting within the file on any variable specified in the global files.
• As an added bonus, when using this system, you can store multiple versions of styles in one place. For example, functionality corresponding to production and development, styles for different browsers and their versions.

Template model for style compilation

//   $develop: false; $production: true; ... //          $all: true; $ie9: false; ... //    $doc: false; //     $local_var: global; //      //                $holydat_var: 8march; //       @import "includes"; 

Model of a global file with imports of all styles

 //      @import "includes/global_var"; //      @import "fonts"; @import "header"; @import "login"; @import "news"; @import "jquery.ui.all"; @import "factory"; @import "rooms"; @import "invite"; ... 

Model file styles for individual controller

 //         ""   @include style_separator("  1", ..."  N"){ //        @include sub_style_separator("  1"){ .selector{ ... } } //        @include sub_style_separator("  N"){ .selector2{ ... } } .selector3{ ... } ... } 

Model file styles for individual controller

 //       @mixin style_separator($var: false, ... $varN: false) { @if $var == $local_var or ... $varN == $local_var { @content; } } @mixin sub_style_separator($var: false, ... $varN: false) { @if $var == $local_var or ... $varN == $local_var { @content; } } 

Total

As a result, we get a system that does not require a serious investment of time and preparation. For the simplest use, only knowledge in SASS is needed. In addition, this approach makes it possible not to spend a lot of time on the organization, division and connection of styles. The system has been tested by me on one big project, but has already shown its effectiveness. I will be glad to criticism of any kind!

PS

Tips on motivated cones:

• Extends use only with "quiet" classes. Otherwise, in each file of the “controller” there will be a lot of unnecessary code.
• It is better to separate styles into global and local. At the same time, local modifications should be written in the “controller” files. Global split into blocks of type lists, checkboxes, etc. ... Then from the resulting set of global you can build a semblance of your framework.
• Use the BEM methodology or everything described above loses its meaning.