Использовать оператор JavaScript/Switch в LESS CSS

Question

Есть ли способ использовать JavaScript внутри LESS CSS-файла..?

Что я сейчас делаю, так это:

.f(@l) {
 float: @l;
}

#header {
 .f(left);
}

То, что я пытаюсь достичь, это что-то вроде этого.

.f(@l) {
   // use switch or JS function to figure out what @l is and use that.
   // for example in this case it could be "l" = left - "r" = right - "n" = none(...)
 float: @l;
}

#header {
 .f(l);
}

Было бы здорово, даже если бы мы могли поместить код JS в файл less.js и затем выполнить его из файла.less ( Источник)

В качестве идентификатора я также использую jQuery на этой странице, если есть какие-либо плагины / хаки, использующие его, это тоже приветствуется. Спасибо!

Answer 1

Вы можете встраивать javascript в ваши файлы lesscss (с обратными метками) здесь:

http://lesscss.org/

Изменить: если эта ссылка приведет вас к началу страницы (как это иногда бывает для меня), найдите / прокрутите вниз до раздела под названием "Оценка Javascript"

Answer 2

Вот как вы можете использовать троичный оператор в простом выражении

// add extra width if @miniPlayButton is true
@extraWidth: ~`('@{miniPlayButton}' == 'true' ? 1 : 0)`;

width: 2em + unit(@extraWidth, em);

Помните, что обычный Javascript не знает о таких единицах, как em поэтому мне легче (и понятнее) сделать что-то подобное.

Если есть лучшая ссылка для подобных простых "рецептов", пожалуйста, опубликуйте ее.

Я работаю на этой стороне сервера с.NET BundleTransformer. Нужно добавить javasriptEnabled или же вы получите сообщение об ошибке "Синтаксическое сообщение: вы используете JavaScript, который был отключен".

  <less useNativeMinification="false" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None" 
        javascriptEnabled="true" >
    <jsEngine name="MsieJsEngine" />
  </less>

Answer 3

Можете ли вы объединить шаблоны JQuery с динамическими таблицами стилей?

Таким образом, в вашем примере вы можете определить что-то вроде

<script type="text/x-jquery-tmpl" id="dynstyles">
.f(${l}) {
  float: ${l};
}

#header {
  .f(left);
}
</script>
<script>
document.write(
    "<style>",
    $.template("#dynstyles").tmpl({ l: "left" }),
    "</style>");
</script>