Как абстрагироваться от повторяющегося селектора от этого меньше кода?

Question

У меня есть ряд Less кодов блоков, которые могут быть повторяющимися - вот простой пример:

.span-@{outer-index}-of-@{max-grid} .row:first-of-type .span-@{outer-index}-of-@{max-grid} 

Как вы можете видеть, что первые и последние разделы точно так же.

Я пытался выяснить, как создать @item переменную и использовать его следующим образом, но не смогли получить код для компиляции из-за проблем синтаксиса:

@item:.span-@{outer-index}-of-@{max-grid}; 

@item .row:first-of-type @item {} 

Anyone Помогите?

Answer 1

Были пара незначительных проблем с кодом, который вы пытались, но в целом вы были на правильном пути. Выполнение следующих исправлений решило бы проблему.

1. При попытке конкатенации значений переменных в строку и получить сцепленную строку в качестве вывода, вы должны поместить все это в кавычки, как показано ниже. Замечание что, когда вы помещаете все это в кавычки, Less будет печатать выходное значение также с кавычками, которые нам не нужны, потому что мы будем использовать его в селекторе. Следовательно, мы должны использовать функции ~() или e(), чтобы вырезать кавычки с вывода.

   @item:~".span-@{outer-index}-of-@{max-grid}";

2. Во-вторых, при использовании переменной в интерполяции селектора, чтобы сформировать селектор динамически, переменная должна иметь форму @{variable-name} (в фигурных скобках), и поэтому для Вашего случая он должен быть изменен, чтобы быть, как показано ниже:

   @{item} .row:first-of-type @{item} { 
       color: blue; 
   }

Finally, the approach suggested earlier by Eric would/should also work if we make the same change as mentioned in Point 2 above (due to selector interpolation being used). However, when this whole selector is nested within another parent, the & (родительский селектор) всегда означает, что весь родитель находится на самом верхнем уровне, и, следовательно, он может работать не так, как ожидалось, для всех случаев.

Например, рассмотрим раскрой сценарий, как показано ниже:

.foo{ 
    @{item} { 
     & .row:first-of-type & {foo:bar;} 
    } 
} 

При компиляции, выше будет производить следующий CSS. Здесь мы видим, как родитель .foo приходит как в начале, так и в конце.

.foo .span-1-of-3 .row:first-of-type .foo .span-1-of-3 { 
    foo: bar; 
} 

Answer 2

Любое повезло с этим?

@item { 
    & .row:first-of-type & {} 
}