Functions and Variables

[BlackKnob]

Is it possible to get access to functions and variables from Discourse variables.scss?

When I edit my theme, I can reference $primary, $secondary etc.
$primary-low or dark-light-choose() are not available though.

Would adding @import "./variables"; to my theme be an overkill?

[Johani (Joe)]

@BlackKnob

Is it possible to get access to functions and variables from Discourse variables.scss?

Yes!

@BlackKnob

When I edit my theme, I can reference $primary, $secondary etc.

$primary-low or dark-light-choose() are not available though.

The short answer is because $primary, $secondary etc are injected in by Discourse while the more complex variables are not.

And so, you’re correct, you’d have to import them first.

I use

@import "common/foundation/variables"

The long answer is here:

How to use Discourse core variables in your theme

Discourse is incredibly customizable! The goal of this topic is to show you how make use of all the amazing options that are available to you as a theme developer. You know… so that you don’t have to reinvent the wheel Variables? What variables? Variables cover a large number of things, from font sizes to colors to z-index values. You can use and override the vast majority of variables in your theme editor. Colors There are many colors available for you to use or override in your th…

@BlackKnob

Would adding @import “./variables”; to my theme be an overkill?

No, it’s not an overkill because they will not be a part of the compiled CSS sheet sent to the client.