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
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
_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.
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
procss touch layout type theme will generate
_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
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.
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
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 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.
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.