CODEWITHSUNDEEP
csstwitter-bootstrapvisual-studiolessweb-essentials
DaveCan
DaveCan

Reputation: 391

How to reference global variables in modular LESS files?

How can I reference a variable defined in a central variables.less file in an individual module.less file, when the module does not directly reference variables.less?

Here's the structure of my Styles folder:

Styles
  _variables.less
  Site.less

  Modules
    _forms.less
    _navbar-top.less
    _panels.less
    _titlebar.less
    Modules.less

  Pages
    _page1.less
    _page2.less
    Pages.less

The file Site.less basically looks like this:

@import "_variables.less";
@import "Modules/Modules.less";
@import "Pages/Pages.less";

(it only includes capitalized LESS files)

And Modules.less looks like:

@import "_forms.less";
@import "_navbar-top.less";
@import "_panels.less";
@import "_titlebar.less";

(it only includes underscore-prefixed files in the same folder)

Pages.less is structured the same way.

What I want to do is have the following in the Modules/_panels.less file:

.panel-form {
    .panel-variant(1px; @text-color; @component-default-bg; 1px);
    border-top: solid darken(@component-default-bg, 1px);
    border-bottom: solid darken(@component-default-bg, 1px);
    border-left: none;
    border-right: none;
}

But of course my LESS compiler (Visual Studio Web Essentials 2013.5) is throwing an error and refusing to compile the file _panels.less because it is referencing a variable that does not exist in its scope.

Currently my workaround is to declare .panel-form in Site.css but that is a hack -- I don't want to start declaring an arbitrary number of modules there.

Is it possible to reference a variable like this and still compile to CSS, and if so how? If not, is there a better structure I should use?

Incidentally I noticed that the LESS compiler doesn't like Bootstrap either, because it raises errors if I type a single space into a Bootstrap LESS file e.g. navbar.less and try to save it, reporting that (for navbar.less) the mixin .clearfix() is undefined. Which of course it is, because navbar.less does not reference mixins.less, yet if it can compile from bootstrap.less downward then everything will work just fine...

Upvotes: 3

Views: 3023

Answers (1)

Martin Chaov
Martin Chaov

Reputation: 864

I don't know what is your environment but with triple slash directives it usually works:

  • root
  • less
      • _vars.less
      • modules
        • someModule.less

Inside "someModule.less" you should try this:

/// <reference path="../_variables.less" />

Upvotes: 0

Related Questions