Универсальный миксин DotLess .box-shadow с поддержкой RTL?

Во-первых, я не идеален в написании меньшего количества миксинов. Мне нужно написать миксин для поддержки RTL и LTR для свойства CSS box-shadow. У меня есть глобальная переменная для направления, называемая @direction. что я сделал, так это определил два миксина для LTR и RTL в зависимости от переменной @direction

.shadow(LTR, @inset: "inset", @hOffset, @vOffset, @blur, @color) {
    @localizedShadow: @inset @hOffset @vOffset @blur @color;
}
.shadow(RTL, @inset: "inset", @hOffset, @vOffset, @blur, @color) {
    @localizedShadow: @inset (@hOffset * -1) @vOffset @blur @color;
}

после этого я добавляю еще 2 миксина для свойства box-shadow

.box-shadow(LTR, @inset: "inset", @hOffset, @vOffset, @blur, @color) {
    .shadow(LTR, @inset: "inset", @hOffset, @vOffset, @blur, @color);
    .box-shadow(@localizedShadow);
}
.box-shadow(RTL, @inset: "inset", @hOffset, @vOffset, @blur, @color) {
    .shadow(RTL, @inset: "inset", @hOffset, @vOffset, @blur, @color);
    .box-shadow(@localizedShadow);
}

на основании этого я не могу скомпилировать из-за ошибки синтаксического анализа.

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

.box-shadow(@direction; @hOffset: 1px; @vOffset: 1px; @blur: 1px;, @color: rgba(0,0,0,.075))

Любая помощь приветствуется.


css less dotless
person Sherif Ahmed    schedule 10.04.2015    source источник
comment
Что говорится в сообщении об ошибке?   -  person seven-phases-max    schedule 13.04.2015
comment
Ошибка разбора! Это оно   -  person Sherif Ahmed    schedule 13.04.2015
comment
Нет упоминания о файле/строке, где это происходит? Хорошо. Теперь, как определяется фактический миксин, который выводит свойства box-shadow? (тот, которого вы называете .box-shadow(@localizedShadow);).   -  person seven-phases-max    schedule 13.04.2015
comment
Кроме того, ;, в вашем последнем утверждении, это просто опечатка только в Q или она выглядит так же в вашем коде?   -  person seven-phases-max    schedule 13.04.2015

Ответы (2)


arrow_upward
1
arrow_downward

Хорошо, тогда, если вы просто хотите получить «перегруженную» тень окна, вы можете упростить ее до:

.box-shadow(LTR, @inset: inset, @hOffset, @vOffset, @blur, @color) {
    box-shadow: @inset @hOffset @vOffset @blur @color;
}
.box-shadow(RTL, @inset: inset, @hOffset, @vOffset, @blur, @color) {
    box-shadow: @inset (@hOffset * -1) @vOffset @blur @color;
}

Применение:

.test {
    .box-shadow(LTR, inset, 1px, 1px, 1px, red);
}
person Neps    schedule 15.04.2015
comment
@{localizedShadow}: @inset @hOffset @vOffset @blur @color;этой строкой я пытаюсь инициализировать новую переменную с именем localizedShadow, чтобы я мог повторно использовать ее или использовать возвращаемое значение миксина в миксине .box-shadow - person Sherif Ahmed; 15.04.2015
comment
Приведенное выше решение @Neps также должно работать с миксином .box-shadow(). Вы можете заменить box-shadow: @inset @hOffset @vOffset @blur @color; на .box-shadow(@inset @hOffset @vOffset @blur @color); и box-shadow: @inset (@hOffset * -1) @vOffset @blur @color; на .box-shadow(@inset (@hOffset * -1) @vOffset @blur @color;), см. codepen.io/anon/pen/pvMxaE. Все примеси .box-shadow совпадают только при совпадении аргументов. Обратите внимание, что когда вы используете миксин .box-shadow только для установки префиксов поставщиков, вы должны предпочесть использовать постпроцессор autoprefixer. - person Bass Jobsen; 16.04.2015

arrow_upward
0
arrow_downward

Наконец-то я получил это работает здесь

.shadow(LTR; @i: inset; @x; @y; @b; @c) {
    @shadow: ~"@{i} @{x} @{y} @{b} @{c}";
}

.shadow(RTL; @i: inset; @x; @y; @b; @c) {
    @xNew: @x * -1;
    @shadow: ~"@{i} @{xNew} @{y} @{b} @{c}";
}

.box-shadow(LTR; @i: inset; @x; @y; @b; @c) {
    .shadow(LTR; @i; @x; @y; @b; @c);
    .box-shadow(@shadow);
}
.box-shadow(RTL; @i: inset; @x; @y; @b; @c) {
    .shadow(RTL; @i; @x; @y; @b; @c);
    .box-shadow(@shadow);
}

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
}
person Sherif Ahmed    schedule 17.04.2015