use semantic ui variables in my assets

[sdesbure]

Hello, I wanted to use semantic ui variables (the colors) in my assets. for example in app/assets/stylesheets/application.css.less:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require semantic_ui/semantic_ui
 *= require_self
 */

.white {
  color: @white;
}

But I have an error: variable @white is undefined.

white is defined in less-rails-semantic_ui-2.0.7.0/assets/stylesheets/semantic_ui/themes/default/globals/site.variables so I thought I could use it...

Is there a way to achieve that?

[jlukic]

Components are scoped, since @white may be defined as different value for each component.

To use site.variables in custom code, you'll need to import it in your own less.

[sdesbure]

Hello and thank you. I understand the issue but I don't understand what to do. Do I have to make a line like that in my application.css.less:

 *= require semantic_ui/sites.variables

Or do I have to import it in vendor/assets/stylesheets/semantic_ui/config/globals/site.variables ? If it's that, how do I do it?

Sorry for these questions but the doc is not clear here :/

[eveevans]

Hi @sdesbure I have the same question. How did you solve it ?

[eveevans]

Ok. I'll answer

As @sdesbure said, you have to import it in order to use that variables.

 /*
 *= require semantic_ui/semantic_ui
 *= require_self
 */

@import 'semantic_ui/config/globals/site.variables';

.white {
  color: @white;
}

[sdesbure]

Hi @eveevans, exactly what I did :smile:

[eveevans]

The problem here is that you can only access to variables (re)defined in site.variables but you cant access to semantic core vars.