published: January 31, 2017 - last updated: May 13, 2024
Sass Descend was always intended to allow access to properties in two different contexts:
.container
@include property(color, red)
.nested
@debug property(color) // -> should be red
.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.