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.
[you app]$ mkdir styles && cd styles
[you styles]$ procss init
[you styles]$ ls scss
_index.scss _ext.scss _local.scss
procss init creates a Compass project with three partials 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. Scouts are partials that import and configure other partials to define the structure of a build tree (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.
- 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”).
Exactly one scout of each type must in a branch or the trunk. Altogether, an index scout, external scout and local scout are called a trinity.
Starting out, we only want to work on scaffolding, typography and decor. While in the /scss directory, call procss touch layout type theme to 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.
[sage scss]$ echo '@import "index";' > main.scss
[sage scss]$ cd ..
[sage foo]$ compass compile
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 <- imports ./_index.scss
_index.scss <- imports _ext.scss, _local.scss. and indexes in base, layout, etc.
_ext.scss <- imports dependencies for entire project
_local.scss <- Imports nothing. No non-scout partials exist in this directory
_index.scss <- imports _ext.scss and _local.scss
_ext.scss <- imports dependencies for base/
_local.scss <- imports reset
_local.scss <- imports grid and footer
_index.scss <- imports ext, local and gui/index
_local.scss <- imports nothing
The tree.scss aggregator 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.
Our web application has grown into a colony of modules, complete with function plotters. We want to style scss/module/control-panel/displays/function-plotters/2d/_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 -.
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.
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 ProCSS managed Compass projects using procss wrap. You can manage dependencies inside each project independently with RVM. Different developers can be assigned to different parts of the web application to diffuse the responsibilities of change management and to separate concerns.
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 and try using ProCSS yourself. ProCSS is still being developed, so it can only get more intuitive in time.