Можно ли задать параметрическое значение по умолчанию через другую переменную в lesscss? - PullRequest
Новая
       7

Можно ли задать параметрическое значение по умолчанию через другую переменную в lesscss?

0 голосов
/ 15 июля 2011

При использовании lesscss возможно ли объявить параметр по умолчанию через другую переменную?Я пробовал это, но не могу заставить это работать.Возможно ли это на самом деле?

Цель состоит в том, чтобы установить @button_bg_color в качестве значения по умолчанию, если @button_gradient_from and @button_gradient_to не будет объявлено. 

@button_bg_color: #9cc961;
@button_txt_color: #fff;

@darkened_button_bg_color: @button_bg_color - #2b2b2b;

.branded_button(@from_color: @button_bg_color, @to_color: @darkened_button_bg_color) {
  color: @button_txt_color;
  background-color: @from_color;
  /* FireFox 3.6 */
  background-image: -moz-linear-gradient(top, @from_color, @to_color);
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, @from_color),color-stop(1, @to_color));
}

.button {
  a {
    .branded_button(@button_gradient_from, @button_gradient_to);
  }
}

++++++++++++++++++++++++++++++++++++++++++

Редактировать: изменено на микширование для этого аналогичного поста: возможны ли имена смешанных переменных в LESS? , но это невозможно при следующем рендеринге: 

.branded_button(@from_color: @button_bg_color {
  color:#ffffff;
  background-color:;
  background-image:-moz-linear-gradient(top,,);
  background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,),color-stop(1,));
}

1 Ответ

1 голос
/ 19 ноября 2011

Вы можете переопределить глобальную переменную в локальной области видимости. Mixin будет вызываться с новым значением. Вне локальной области видимости глобальная переменная сохранит свое значение. Смотрите этот МЕНЬШИЙ код. 

/* global variables */
@f-border-width: 4px;
@f-border-style: solid;
@f-border-color: #BE2;

/* default parameters - global variables */
.f-border (
        @width: @f-border-width, 
        @style: @f-border-style,
        @color: @f-border-color
    ) {
    border: @width @style @color;
}

/* using initial value of global variable "@f-border-color" */
.base-1 {
    .f-border;
}

/* changing global variable "@f-border-color" in the local scope */
.extension {
    @f-border-color: #F16;
    .f-border;
}

/* outside of the local scope of ".extension" */
/* global variable "@f-border-color" preserves its value */
.base-2 {
    .f-border;
}

Он будет скомпилирован в этот код CSS. 

.base-1 {
  border: 4px solid #bbee22;
}

.extension {
  border: 4px solid #ff1166;
}

.base-2 {
  border: 4px solid #bbee22;
}

Пожалуйста, смотрите демо .

...