Как повторно использовать миксин, чей селектор формируется с помощью конкатенации

Question

В Меньше я могу написать:

.outer {  
    .inner {  
        color: red;  
    }  
}

.test {  
    .outer .inner;
}

Но когда я пишу:

.outer {  
    &-inner {  
        color: red;  
    }  
}

.test {  
    .outer-inner;
}

Когда я удаляю .test, .outer-inner вывод правильно, но когда я добавляю его обратно, компилятор говорит

.outer-inner не определен.

Есть ли в любом случае повторно использовать стили .outer-inner?

Answer 1

Вызов миксина, чей селектор образован конкатенацией, в настоящее время невозможен при использовании Less. Однако то же самое возможно для селекторов, сформированных во время компиляции с использованием интерполяции (также называемых динамически сформированными селекторами).

Ниже (интерполированный / динамически сформированный селектор) будет работать нормально.

@selector: .box;
@{selector}{
    color: red;
    .child{
        color:blue;
    }
}
.demo{
    .box; /* will create both parent & child */
}
.container{
    &.box{
        background: black;
    }
}
.demo2{
    .container.box;
}

тогда как следующий пример не будет работать.

.container{
    &-box{
        color: blue;
    }
}
.demo2{
    .container-box; /* this will not work */
}

---

В настоящее время одним из обходных путей для рассматриваемого сценария является создание двух отдельных файлов Less.

В первом файле (test.less) добавьте приведенный ниже код и скомпилируйте его в файл CSS.

.outer {  
    &-inner {  
        color: red;  
    }  
}

Во втором файле импортируйте CSS, созданный из первого файла с (less) директива, а затем вызвать / повторно использовать миксин.

@import (less) "test.css";
.test {  
    .outer-inner;
}

Примечание. Как отмечается в комментариях к семи-максимальным, эта проблема аналогична этому пункту. Однако оба эти вопроса не совпадают с extend не будет работать как с интерполированным селектором (динамически сформированным), так и со сцепленным селектором.

---

Вариант 2. Другой вариант - написать фиктивный миксин или отдельный отдельный набор правил с общими свойствами и использовать его, как показано ниже.

@dummy: {color: red}; // detached ruleset

.outer{
    &-inner{
        @dummy();
    }
}

.test{
    @dummy();
}

или же

.dummy() {color: blue}; // dummy mixin and would produce no extra selector in output as it has parentheses.

.outer{
    &-inner{
        .dummy;
    }
}

.test{
    .dummy;
}