3

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...

DaveCan
  • 361
  • 1
  • 5
  • 12
  • What you need is to configure the WE to compile the project master file and not the file you edit/save. E.g. see http://stackoverflow.com/questions/19213067. – seven-phases-max Oct 08 '15 at 01:35
  • @seven-phases-max Thanks, but I don't see anything in that answer about compiling a master file. There are references to WE ignoring files with a leading underscore by convention. So I'm guessing maybe I should change the files like Modules.css to _modules.css or similar so it doesn't try to compile. Will try that tomorrow morning. Or did I miss something? How do I configure it the way you mention? Thanks again. – DaveCan Oct 08 '15 at 03:58
  • http://stackoverflow.com/a/19213447 – seven-phases-max Oct 08 '15 at 09:02
  • @seven-phases-max Ok yes my apologies I saw that but your answer read as if there were a way to "point" WE at a single master LESS file. I just made that change in WE but it is still compiling underscore-prefixed LESS files to CSS and throwing errors. The errors don't stop it from building but they are reporting errors in the Error List window. From what I read the underscore prefix is supposed to prevent WE from compiling the LESS file, yet it is still compiling. Am I missing a setting somewhere? Thanks again. – DaveCan Oct 08 '15 at 14:01
  • Hmm, renaming the Modules/Modules.less file to Modules/__Modules.less (2 underscores so it sorts to the top) seems to solve the issue. It still throws errors and litters the Error List but the styles I define in Modules/_panels.less using the variables from ./_variables.less actually compiles properly into ./Site.css on build. Wish there was some way to turn off the errors but at least it works. Thanks for the pointer. – DaveCan Oct 08 '15 at 14:20

1 Answers1

0

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" />
Martin Chaov
  • 824
  • 7
  • 17