Aloe enables rapid scaffolding for SCSS projects

aloe is a Sass-author­ing tool writ­ten in Python 2.7 that I use to write styles. Like oth­er style-cen­tric tools it is opin­ion­at­ed and does not do any­thing spe­cial. But, it is friend­ly to ter­mi­nal junkies. Run pip install aloe-pattern and fol­low along. I think you’ll like it.

Structuring projects with an aloe plant analogy

To enable a few fea­tures I apply a niche fla­vor of the Com­pos­ite pat­tern:

Any stylesheet direc­to­ry can be con­vert­ed to a new project at will, or vise-ver­sa.

This assumes fea­tures do not cut across direc­to­ries. Like with many oth­er pat­terns, the ben­e­fits to aloe’s pat­tern come from con­ve­nient­ly-avail­able con­text.

Sass, LESS or CSS on a laptop screen

Aloe works with a few goals in mind:

  1. Code shar­ing. One change may affect as many projects as I choose with­out involv­ing a remote resource.
  2. Rapid scal­able scaf­fold­ing. We won’t type @import  any­more, we will gen­er­ate con­tex­tu­al­ized rule­sets and we will have a cus­tom SMACSS project with BEM-ready wid­gets and themes for Christ­mas and Hal­loween ready yes­ter­day, with­out using tem­plates!
  3. Non-inva­sive­ness. I typ­i­cal­ly dis­like soft­ware that makes me feel like I need it. Aloe has no con­fig­u­ra­tion file and does not do any­thing weird to your code. You can use aloe and then imme­di­ate­ly unin­stall it with­out los­ing any of its ben­e­fits.

Tech Demo

Managing local dependencies

It’s eas­i­er to show than tell, so let’s start that SMACSS exam­ple I was talk­ing about. I’ll run aloe + base/normalize layout/{grid,sticky-footer} module/clock state/{form,notifications} theme/{xmas,halloween} to spin up a filesys­tem.

Using aloe to spin up a custom SMACSS project

This builds out of the box. The aloe plant anal­o­gy comes in with the __.scss par­tials. I call them rinds as part of the anal­o­gy, and all they do is import oth­er par­tials for me and pro­vide the frac­tal struc­ture for Sass com­pi­la­tions. The fol­low­ing rules apply:

  1. Every direc­to­ry con­tains exact­ly one rind named __.scss.
  2. Rinds con­tain only @import direc­tives, and are also the only files to con­tain @import direc­tives. They import par­tials inside their own direc­to­ries before oth­er rinds.
  3. Rinds may only import oth­er rinds in imme­di­ate sub­di­rec­to­ries. So ~/scss/__.scss may import ~/scss/foo/__.scss, but not ~/scss/bar/baz/_.scss.

These rules con­sol­i­date depen­den­cy man­age­ment to one file at a time, and you can use rinds as a sin­gle point to include or exclude entire swaths of func­tion­al­i­ty from a com­pi­la­tion, as we will see lat­er.

Get­ting back to our SMACSS exam­ple, if I need to reorder or remove any depen­den­cies, it’s just as easy. If I run aloe - state for exam­ple, state styles will be exclud­ed if I build any styles from the root of the project.

To elab­o­rate, let’s look at a fresh exam­ple. Here I run aloe + a b c d e. You will see that my root rind imports the depen­den­cies in the order I declare. If I clear out this file (>__.scss) and then link up the par­tials in reverse order (aloe + e d c b a), the effect is as expect­ed.

Writing partial contents

This seems like its all well and good, but what about set­ting the con­tents for these par­tials? One thing I do as a next step for scaf­fold­ing is use the aloe plot com­mand that lets me write a sum­ma­ry of rule­sets. If I run some­thing like aloe plot "clock(hourhand,minhand,sechand)", I get SCSS rule­sets. There’s a switch I throw to enable BEM-style writ­ing à la Stu­art Rob­son, so aloe plot -b "button(--big,__text(--upper,--lower))" gives me a BEM-y par­tial.

Don’t wor­ry about leav­ing these rule­sets emp­ty, because Sass will not include any emp­ty rule­sets in com­piled CSS.

On that note, let’s build some CSS. Here I use aloe build to out­put CSS using rinds. I can spec­i­fy mul­ti­ple tar­gets to build and con­cate­nate in order so I can deploy tar­get styles depend­ing on what I need. This nice­ly mesh­es with per-request style deploy­ment.

aloe fol­lows sym­links, so I can main­tain a link to any (S)CSS stylesheet to ben­e­fit from its fea­tures as if it were a par­tial.

In this post we cov­ered a non-inva­sive Sass author­ing tool used for rapid scaf­fold­ing and cus­tom deploy­ment of styles using a frac­tal orga­ni­za­tion pat­tern.

One Reply to “Aloe enables rapid scaffolding for SCSS projects”

  1. Pingback: Terminal recording for GIF screencasts using toughtty • Sage Gerard

Comments are closed.

Do NOT follow this link or you will be banned from the site!