Перечисления / Документация с LESS Mixins

Список допустимых значений "Enum"

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

.background-clip(@value) when (@value = border-box),
                              (@value = padding-box),
                              (@value = content-box),
                              (@value = inherit)
{
    -webkit-background-clip: @value;
       -moz-background-clip: @value;
            background-clip: @value;
}

Это позволяет передать только четыре заданных значения для активации. Итак, это:

.test1 {
  .background-clip(border-box);
}

.test2 {
  .background-clip(something);
}

Дает такой результат (игнорируя второй вызов, потому что он недействителен):

.test1 {
  -webkit-background-clip: border-box;
  -moz-background-clip: border-box;
  background-clip: border-box;
}

Прокомментированный отзыв

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

ВАРИАНТ 1 - чистый комментарий

.background-clip(@value) when not (@value = border-box) and
                              not (@value = padding-box) and
                              not (@value = content-box) and
                              not (@value = inherit)
{
  /* WARNING - INVALID INPUT
     CSS output for backbround-clip property given in
     LESS .background-clip() call has been suppressed
     due to invalid input.

     VALID INPUT is one of:
       border-box
       padding-box
       content-box
       inherit
  */
}

Тогда приведенный выше тестовый пример будет иметь следующий дополнительный вывод:

.test2 {
  /* WARNING - INVALID INPUT
     CSS output for backbround-clip property given in
     LESS .background-clip() call has been suppressed
     due to invalid input.

     VALID INPUT is one of:
       border-box
       padding-box
       content-box
       inherit
  */
}

ВАРИАНТ 2 включает фиктивное значение свойства, чтобы показать неправильный ввод @value:

.background-clip(@value) when not (@value = border-box) and
                              not (@value = padding-box) and
                              not (@value = content-box) and
                              not (@value = inherit)
{
  /* WARNING - INVALID INPUT */
  invalid-background-clip-input-equals: @value;
  /* CSS output for backbround-clip property given in
     LESS .background-clip() call has been suppressed
     due to invalid input.

     VALID INPUT is one of:
       border-box
       padding-box
       content-box
       inherit
  */
}

Что выводит этот дополнительный тестовый пример CSS:

.test2 {
  /* WARNING - INVALID INPUT */
  invalid-background-clip-input-equals: something;
  /* CSS output for backbround-clip property given in
         LESS .background-clip() call has been suppressed
         due to invalid input.

         VALID INPUT is one of:
           border-box
           padding-box
           content-box
           inherit
      */
}

Браузеры проигнорируют нераспознанное «свойство» invalid-background-clip-input-equals, но предупредят человека, просматривающего скомпилированный CSS, о недопустимости переданного значения.

ВАРИАНТ 3 включает фиктивный (т.е. неопределенный) миксин, который потенциально может вызвать ошибку компиляции (разные компиляторы могут обрабатывать неопределенные миксины по-разному):

.background-clip(@value) when not (@value = border-box) and
                              not (@value = padding-box) and
                              not (@value = content-box) and
                              not (@value = inherit)
{
   .background-clip-undefined();
}

Что выводит в этот компилятор эту информацию:

SyntaxError: .background-clip-undefined is undefined on line 24, column 3:

23 .test2 {
24   .background-clip(something);
25 }

Это может быть способом «заставить» менее программиста ввести допустимое значение, выдав ошибку. Обратите внимание, что в этом случае фактический неопределенный миксин, дающий ошибку, - это .background-clip-undefined(), но этот компилятор фактически предоставляет "вызывающую" информацию .background-clip(something), которая на самом деле является ошибкой.

Можно комбинировать варианты 2 и 3, чтобы, если компилятор не выдает ошибку, по крайней мере, обратная связь с комментарием видна.