Closed tysongach closed 7 years ago
couple of notes here:
form
variables be moved to within forms.scss
. this will encourage a pattern of abstracting when appropriate and not just all abstraction all the time.$_button-default-background-color
where I would have gone with $_button-background-color-default: $medium-gray;
. obviously this is a huge issue that requires hours of discussion and deliberation.
I’d like to investigate a refinement to how we set up Sass variables in Bitters.
Problem
Right now, we have one
_variables.scss
partial, and every Sass variable in Bitters is defined there. This is fine in the context of Bitters; the project itself. But when a project that uses Bitters grows and variables are added, I’ve found the_variables.scss
partial often balloons to upwards of 100 lines (highest I’ve seen yet is 377!). It makes it very hard to parse and feels unorganized to me. You begin to see things like this:While technically these variables are global (because Sass), I’d bet each of them are only used in one place:
components/_badges.scss
andcomponents/_tooltips.scss
, respectively (or something similar).I’ve been asking myself a lot lately: Why define these in a partial with global project variables and not alongside the component styles they are strictly used in?
Possible solution
Couple thoughts here…
Variables are a Sass feature. We’ve named this partial after the feature, and so I think people feel encouraged to put all variables here, when that might not best solve for the job-to-be-done.
We could rename
_variables.scss
to_global-tokens.scss
. I’d be open to other names, but quite a few people have started using “token” as a term to describe global, project-specific decisions that establish a design system:Encourage (unsure how Bitters could specifically help with this) component-level variables to be defined within the component’s partial. Here‘s an example showing this, and how it ties back to global tokens:
Note: The underscore in
$_button-default-background-color
denotes it is a partial used only within the partial in which it is defined in.The immediate change in Bitters with this idea would be to put the
$form-
variables inside the_forms
partial.Thoughts?