Search code examples
reactjsblueprintjs

Using color variables in blueprintjs

Is it necessary to use a css preprocessor like less or sass to be able to access the defined color variables in Blueprint.Colors? I've looked at the source and those only appear on .scss and .less files. However, the documentation assumes the variables are accessible with the default setup.

Solution

  • Blueprint.Colors is a JS object that can be used in your JS code. It does not require a CSS preprocessor because it's just a plain JS object (source code). Examples: Blueprint.Colors.BLACK, Blueprint.Colors.BLUE3.

    The Sass variables all begin with $ and can only be used in Sass files that import the Blueprint variables.scss file. Examples: $black, $blue3. (Less variables have the same names but use an @ prefix: @black.)

    (It's also possible, but nontrivial, to use the JS variables in a CSS preprocessor. We do this internally by generating the Sass variables from the JS object.)