ProCSS

ProCSS is a BASH command line utility that automates file management tasks in modular Sass/Compass projects of any scale. For the sake of brevity I assume you are familiar with all aforementioned tools, because this is a lower level guide to the tool.

Assume we need to maintain a growing modular web application. We start styling with a Compass project created with ProCSS.

Scouts are partials that import and configure other partials. The logical structure is a build tree, which is just a set of partials linked together in a directory tree. The scss  directory is called the trunk, and any sub-directory of the trunk is called a branch.

procss init creates a Compass project with three scouts called _index.scss, _ext.scss and _local.scss in a generated  scss directory. These partials are called the index scout, the external scout and the local scout respectfully.

  • A external scout imports third party components.
  • A local scout imports non-scouts in its directory.
  • An Index scout imports scouts in its directory, and imports index scouts in immediate sub-directories (AKA "branches").

Altogether, an index scout, external scout and local scout are altogether called a trinity.

Exactly one trinity must in each branch and in the trunk.

Small Scale

Let's style a small web app.

Starting out, we only want to work on scaffolding, typography and decor. If you are in in the scss  directory,   procss touch layout type theme will generate _layout.scss, _type.scss and _theme.scss and import all three in that order. ProCSS automates imports without  “globbing.”

For now, our files are all partials. We will use an aggregator file (A non-partial compiled for some platform, media or requirement) that imports the trunk index scout to compile. The resulting CSS file will contain all styles.

Build Tree Generation

We have to add a bunch of modules, so we decide to reorganize. A text file called  tree will represent a new SMACSS-compliant build tree.

Lines are tab-indented.

procss gen tree generates this build tree.

tree.scss was generated so the project compiles out of the box. You can style immediately with rules already organized in a semantic way (i.e. /theme/_xmas.scss is a Christmas theme). Remember that everything is imported in the order declared.

To add a new module, call  procss touch module/my-module. To add a new directory, call  procss mkdir my-directory.

Navigation

Assume our web application has grown into a colony of modules, complete with a function plotter.

Say we want to style scss/module/control-panel/displays/function-plotter/_axes.scss. We can immediately open the partial with procss grab axes. A recursive search is used to find the partial, so if multiple results are found, the first result is opened. You can navigate “towards” your target to avoid conflicting results.

You can navigate branches via recursive search using procss cd. To return to the directory you came from, use  cd -. Calling  procss cd function-plotter followed by  vim _axes.scss has the same effect as  procss grab axes.

If you wanted to edit a trinity in module/gui, calling  procss tri gui at the project root opens the relevant trinity in VIM using split views.

Encapsulation

Assume we need a team to style our application. The fact that Sass does not have namespaces makes dependencies difficult to organize as projects get larger. When your developers have different responsibilities, they are also forced to be aware of all code in the project space.

You can convert branches of a build tree to self-contained projects using procss wrap. You can then manage dependencies inside each project independently with RVM. Specialized developers can then be assigned to different parts of the front end.

Conclusion

We talked about some ways that ProCSS takes care of tedious, repetitive tasks involving the management of partials in modular Sass/Compass projects. To learn more, read the ProCSS wiki.