Смешать с помощью «&» селектор без изменения класса HTML - PullRequest
Новая
       9

Смешать с помощью «&» селектор без изменения класса HTML

0 голосов
/ 01 июня 2018

Я хотел бы задать вопрос о mixin uage

Моя цель - изменить размер шрифта TESTING в соответствии с другим языком с помощью mixin.Класс Home и языковой класс должны быть заданы в теге HTML. 

<html class='Home en'>
    <body>
        <div class='text'>TESTING</div>
    </body>
</html>

Настройка CSS 

.Home {
    .text {
        @include font(20)
    }
}

Я написал смесь для обработки размера шрифта в соответствии с другим языком 

@mixin font($size) {
    font-size: $size + px;

    .en & {
        font-size: $size - 5 + px;
    }
}

Тем не менее, результатом будет: .en .Home .text {...} вместо .en.Home .text {...}

Как я могу обработать этот случай, используя mixin?Или любой другой вариант, который я мог использовать, чтобы исправить эту проблему без изменения класса в теге HTML?

Спасибо всем!

1 Ответ

0 голосов
/ 01 июня 2018

Вам необходимо проанализировать ссылку & и использовать первый селектор для объединения с .en, а затем получить остальную часть селектора для построения полного селектора.& - это список списков, содержащий все родительские селекторы, поэтому вы можете выполнять итерацию по списку, используя функции списков Sass.

Попробуйте выполнить следующее: 

@mixin font($size) {
    font-size: $size + px;

    // Get the first parent selector, to aply the '.en'
    $root: nth(nth(&, 1), 1);

    // Get all the other parent selectors
    $rest : ();
    @for $i from 2 through length(nth(&, 1)) {
        $rest: append($rest, nth(nth(&, 1), $i));
    }

    // Create the selector
    $selector: unquote(".en#{$root} #{$rest}");

    // Print it at root
    @at-root #{$selector} {
        font-size: $size - 5 + px;
    }
}

Проверьте код работы здесь

...