Динамические свойства CSS в LESS?

Question

Я пишу меньше таблиц стилей для двунаправленного веб-сайта, и мне нужно написать один файл меньшего размера и создать две разные таблицы стилей: одну для разметки слева направо (ltr), а другую - справа налево.макеты (rtl)

поэтому, когда я создаю стили для макетов rtl, я хочу преобразовать каждое левое значение в правое, если для этого используется float, padding или margin,

, чтобы сделать это,Я определил обязательные переменные в верхней части моего меньшего файла следующим образом:

@left: right;
@right: left;

, просто я могу динамически перемещать элементы следующим образом

float: @left; // this will be floated to left in ltr layout while it will be right in rtl layout.

, но моя проблема в том, что я хочубыть в состоянии также использовать эти переменные для создания динамических свойств, например, при абсолютном или относительном позиционировании элементов, я хочу иметь возможность динамически записывать свойство left или right в зависимости от значения переменной @left какследует

position: relative;
@left: 10px;

, но это дает ошибку при компиляции, любые подсказки, как это сделать, обратите внимание, что я сделал это с помощью SASS, но до сих пор я не мог заставить его работатьс МЕНЬШЕ?

Answer 1

Ниже приведено решение, которое позволяет вам один раз написать свои стили с помощью LESS, а затем скомпилировать их в две разные таблицы стилей CSS для макетов rtl и ltr.

в основном у нас будет три файла LESS (их может быть больше!):

style-ltr.less  // this where we hold the rtl variables
style-rtl.less  // rtl variables
main.less       // here we'll write our styles

в style-ltr.less определяют следующие переменные:

@left: left;
@right: right;

@import "main.less";

в то время как в style-rtl.less они будут иметь следующие значения:

// reflect variables
@left: right;
@right: left;

@import "main.less";

теперь в main.less, мы определим следующие миксины

.left(@distance) when (@left = left) {
    left: @distance;
}
.left(@distance) when (@left = right) {
    right: @distance;
}
.right(@distance) when (@right = right) {
    right: @distance;
}
.right(@distance) when (@right = left) {
    left: @distance;
}

// now we can style our elements using these mixins
div.something {
    position: relative;
    .left(10px);
    float: @left;
}

теперь все, что нам нужно сделать, это включить style-rtl.less в rtl-страницы include (или скомпилированную версию css), а также включить style-ltr.less в страницы ltr, и div.something будет перемещено влево на страницах ltr, а оно будет перемещено вправо на страницах ltr

Обратите внимание, что вы можете определить padding, margin, border-radius ...etc., используя то же самое здесь.

ОБНОВЛЕНИЕ

Я создал два проекта на github, чтобы помочь в создании двунаправленных приложений

• би-приложение менее
• би-приложение-дерзость

Кредиты:

вдохновленный моим дорогим другом Виктор Замфир

Answer 2

Если вы используете DotLess, здесь есть кое-что более интересное, что можно использовать вместо определения конечного числа миксинов.

Он встроен как плагин RTL.https://github.com/dotless/dotless/wiki/Plugins

dotless.Compiler.exe -p:Rtl:forceRtlTransform=true,onlyReversePrefixedRules=false file.less

Answer 3

Вы можете проверить эту библиотеку: https://github.com/DevelopmentIL/direction.less

Она имеет большую поддержку многих css-правил.Например:

@direction: rtl; // use `rtl` or `ltr`
@import "direction.less";

body {
  .direction();
}

.float {
  .float();
}

.box {
  display: inline-block;
  .margin-left(4px);
  .padding-right(1em);
}

Будет выводить:

body {
  direction: rtl;
}

.float {
  float: right;
}

.box {
  display: inline-block;
  margin-right: 4px;
  padding-left: 1em;
}

Answer 4

Обновление: взгляните на Guard Expressions в LESS - возможно, это может немного помочь, вы можете создавать своего рода условные операторы, но вы должны использовать mixins.

Я понимаю вашу точку зрения, но с другойстороны я бы подошел к этой проблеме по-другому.Вот еще один упрощенный подход - вы определяете переменные для различий в обоих случаях, а затем импортируете их по своему желанию - например, помещаете в master-ltr / master-rtl и импортируете остальные таблицы стилей после:

// master-ltr.less
// LTR:
@sidebar-pos-left: 10px;
@sidebar-pos-right: 0px;
@content-float: left;
...
@import 'styles.less';

// your styles.less would have:
.content {
  float: @content-float;
  ...
}
.sidebar {
  position: relative;
  left: @sidebar-pos-left;
  right: @sidebar-pos-right;
  ...
}

.. или может быть более эффективным - создайте отдельный файл с помощью vars-ltr / rtl, а затем импортируйте его в ваш master-ltr / rtl.

Не уверен, насколько сложен макет, но, возможно, это даст вам что-томожно использовать?

---

Я пробовал это с использованием String Interpolation , но похоже, что переменные могут быть встроены только в "переменную" часть определения.Я могу ошибаться, может быть, люди знают, как этого добиться.

Я бы сделал это немного иначе, не потому, что это невозможно с LESS, но из-за организации кода и общего более разумного подхода (этонехорошо называть что-то «левым», когда иногда это будет на самом деле «правым»:)

Для вашей второй проблемы с position:relative вот мой вариант:

<div class="element element-ltr">...</div>

.element {
  position: relative;
  &.element-ltr {
    left: @element-side-position;
  }
  &.element-rtl {
    right: @element-side-position;
  }
}

Это решениеЭто нормально, но если у вас огромная таблица стилей, вы получите множество дополнительных классов для -ltr и -rtl.Не очень большая боль, но вы могли бы на самом деле сделать его еще более полезным, расширив область действия -ltr / -rtl на родительские контейнеры (например, header / content / sidebar / footer) и затем отрегулировать их оттуда.У них может быть много общего, например, фон, цвета, размер шрифта ... и вы просто поработаете над различиями в их версиях -ltr / -rtl.

Кроме того, ознакомьтесь с LESS Namespaces, они могут предложить вам еще больше организационных полномочий.

Надеюсь, это поможет!