Условный, если в файле меньше

Question

Я создаю редактор тем для WordPress и хотел бы использовать меньше для создания файла CSS.

Я поместил строку в переменную так:

@banner-separation-style: 'thick_border'; 

Тогда я пытаюсь использовать, когда(), как это:

when (@banner-separation-style = 'thick_border') { 
    header { 
     ... some style 
    } 
    ... and some css selectors 
} 

Я также попытался комбинации, не цитируя переменная.

Как правильно создать нечто похожее на if-блоки с меньшим количеством?

Answer 1

Охранники (when) могут использоваться только вместе с mixin или CSS selector. Мы не можем написать заявление when без использования одного из них. Таким образом, либо записать его с Mixin, как показано ниже:

@banner-separation-style: 'thick_border'; 
.border-styles() when (@banner-separation-style = 'thick_border') { 
    header { border: 2px solid red; } 
    nav { border: 2px solid green; } 
} 
.border-styles; 

или непосредственно с помощью селектора CSS, как показано ниже:

@banner-separation-style: 'thick_border'; 
header when (@banner-separation-style = 'thick_border') { 
    border: 2px solid red; 
} 
nav when (@banner-separation-style = 'thick_border') { 
    border: 2px solid green; 
} 

или по крайней мере с помощью безымянного селектор (&), как показано ниже:

@banner-separation-style: 'thick_border'; 
& when (@banner-separation-style = 'thick_border') { 
    header { border: 2px solid red; } 
    nav { border: 2px solid green; } 
} 

Первая версия (с mixin) является той, которую я предпочитаю, потому что (a) вам не нужно повторять условие несколько раз, как в версии селектора CSS, и (b) предоставление смеси в имени делает его более читаемым, чем использование неназванного селектора. Это просто мой выбор, и какой-то другой пользователь действительно может предпочесть последнее, потому что ему не нужен дополнительный оператор вызова mixin.