2015-10-07 4 views
3

Как я могу ссылаться на переменную, определенную в файле central variables.less, в отдельном файле module.less, когда модуль напрямую не ссылается на переменные.less?Как ссылаться на глобальные переменные в модульных LESS-файлах?

Вот структура моей папки Стили:

Styles 
    _variables.less 
    Site.less 

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

    Pages 
    _page1.less 
    _page2.less 
    Pages.less 

Файл Site.less в основном выглядит следующим образом:

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

(это только включает в себя капитализированные МЕНЬШЕ файлы)

и модули . не выглядит:

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

(он включает только файлы с подчеркиванием-префиксами в той же папке)

Pages.less структурирован таким же образом.

То, что я хочу сделать, это следующее в Modules/файла _panels.less:

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

Но, конечно, мой МЕНЬШЕ компилятор (Visual Studio Web Основы 2013.5) бросает ошибку и отказывается компилировать файл _panels.less, поскольку он ссылается на переменную, которая не существует в , ее область.

В настоящее время мое обходное решение состоит в том, чтобы объявить .panel-form в Site.css, но это взломать - я не хочу начинать объявление произвольного количества модулей там.

Можно ли ссылаться на переменную типа this и по-прежнему компилировать в CSS, и если да, то как? Если нет, есть ли лучшая структура, которую я должен использовать?

Кстати, я заметил, что компилятор LESS тоже не похож на Bootstrap, потому что он вызывает ошибки, если я ввожу одно место в файл LAST Bootstrap, например. navbar.less и попытайтесь сохранить его, сообщив, что (для navbar.less) mixin .clearfix() не определен. Это, конечно, так, потому что navbar.less не ссылается на mixins.less, но если он может скомпилироваться из bootstrap.less вниз, тогда все будет работать нормально ...

+0

Что вам нужно будет настроить WE скомпилировать мастер проекта файл, а не файл вы редактируете/сохраняете. Например. см. http://stackoverflow.com/questions/19213067. –

+0

@ seven-phase-max Спасибо, но я ничего не вижу в этом ответе о компиляции основного файла. Есть ссылки на WE игнорирование файлов с помощью основного подчеркивания по соглашению. Поэтому я предполагаю, что я должен изменить файлы, такие как Modules.css, на _modules.css или аналогичные, чтобы он не пытался скомпилировать. Попробуем это завтра утром. Или я что-то пропустил? Как настроить его так, как вы упомянули? Еще раз спасибо. – DaveCan

+0

http://stackoverflow.com/a/19213447 –

ответ

0

Я не знаю, какова ваша среда, но с тройным директивами слэш обычно работает:

  • корень
  • менее
      • _vars.менее
      • модули
        • someModule.less

Внутри "someModule.less" Вы должны попробовать это:

/// <reference path="../_variables.less" /> 
Смежные вопросы