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

Question

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

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

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

@left: right; 
@right: left; 

просто, я могу плавать элементы динамически, как Тхи s

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

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

в основном мы будем иметь три МЕНЬШЕ файлы (они могут быть больше!):

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 включает (или скомпилированную версию CSS), , а также включить в style-ltr.less литровых страницах и div.something будет размещаться слева на страницах ltr, в то время как он будет перемещаться вправо на страницах rtl.

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

UPDATE

Я создал два проекта на GitHub, чтобы способствовать созданию двунаправленного приложений

• bi-app-less
• bi-app-sass

Credits:

вдохновленные моим дорогим другомВиктор Zamfir

Answer 2

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

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

// 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, а затем импортируйте в свой мастер-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, они могут предложить вам еще больше организационных полномочий.

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

Answer 3

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

Он встроен как плагин RTL.

https://github.com/dotless/dotless/wiki/Plugins

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

Answer 4

Вы можете проверить эту библиотеку: 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; 
}