Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

//---------- #1559

Closed
Lisa-Williams opened this issue Jan 3, 2015 · 3 comments
Closed

//---------- #1559

Lisa-Williams opened this issue Jan 3, 2015 · 3 comments

Comments

@Lisa-Williams
Copy link

//----------

@jlukic
Copy link
Member

jlukic commented Jan 4, 2015

@@element is the same as the value of the variable set as @element

So if @element is button then @theme: @@element is the same as @theme: @button which is set in theme.config (in a fresh copy) as default, or more simply:

@element: 'button';
@theme: @@element
@theme: @button
@theme: 'default';

The other variables should be simpler to understand, they are explicitly set in theme.config

@themesFolder: 'src/themes/`

And in the definition

/* if compiling src/definitions/elements/button.less  */
@type: 'element';
@element: 'button';

So the path turns from

@import "@{themesFolder}/@{theme}/@{type}s/@{element}.variables";`

To

@import src/themes/default/elements/button.variables

Each less file is compiled separately, each running theme.less in the context of the @element which is set in each definition.

Part of why less files cannot be imported directly into other LESS files is that variables are handled globally in LESS meaning that @theme for example, will not be defined differently for each imported element (as it should) because the variables are all hoisted to to global scope

@jlukic
Copy link
Member

jlukic commented Jan 4, 2015

You are mistaking the parsed values.

//Then
@import "@{themesFolder}/@{theme}/@{type}s/@{element}.variables";
//becomes
@import "src/themes/default/elements/button.variables"
@import "src/themes/default/views/statistic.variables"
//and
@import "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
//becomes
@import "src/themes/default/elements/button.overrides"
@import "src/themes/default/views/statistic.overrides"

because
@theme = @element => @statistic => 'default'.

@site is the theme of src/definitions/global/site.less which has sitewide css and variables.

This is not the same as the "site theme" which are override || .variable files located in src/site/ that correspond to every UI element.

The site definition even has its own "site theme" in src/site/globals/site.variables

@jlukic
Copy link
Member

jlukic commented Jan 4, 2015

No worries, nice to have this archived on GitHub in case this comes up again.

Perhaps will include in upcoming FAQ

@jlukic jlukic reopened this Jan 4, 2015
@jlukic jlukic closed this as completed Jan 4, 2015
@Lisa-Williams Lisa-Williams changed the title Initialization of variable @theme in file theme.less //---------- Feb 10, 2015
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants