blainehansen

Sass Descend, a Simpler Rethink

My first attempt used a recursive system that was too opaque and potentially confusing. By pulling apart the different qualities of the library it's much more clear now.

published: January 31, 2017 - last updated: May 13, 2024

Sass Descend was always intended to allow access to properties in two different contexts:

  • Those defined higher up on the selector nesting tree.
.container
	@include property(color, red)

	.nested
		@debug property(color) // -> should be red
  • Those defined on less specific versions of the current selector.
.component
	@include property(color, red)

#context .component.version-class
	@debug property(color) // -> should be red

This creates two completely distinct ways of looking for a defined property, a nesting based and component based.

The previous implementation had the two mixed together in a very complex recursive search strategy (opens new window), which could easily have lead to very surprising and irritating bugs.

.component
	@include property(color, red)

#context
	@include property(color, green)

	.component
		@debug property(color) // -> red? shouldn't this be green? What???

The best solution was to pull the two apart. Go ahead and take a look and the current version. (opens new window) The Bubble (opens new window) portion handles looking up the tree in a very simple and intuitive manner, and Deployables (opens new window) are a new concept allowing creation of sass components in a psuedo object-oriented fashion. The two together solve both problems without creating a confusing specificity and ordering mess.

Want to hear from me in the future?

Usual fine print, I won't spam you or sell your info.
Thank you! Come again.