Блог

Главная - Вопросы по программированию - Использование mixin в файле scss

Использование mixin в файле scss

#scss-mixins

Вопрос:

У меня есть файл default.scss, и в файле у меня есть этот css

         .excelGridCell { 
            background: $nav-background;
            height: 2.5em;
            border-radius: .8rem;
        }

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

         @mixin special-button {
            .excelGridCell {
                background: $nav-background;
                height: 2.5em;
                border-radius: .8rem;
            }
        }

Затем вызвал его в том же файле(по умолчанию.scss), как это.

         .excelGridCell{
            @include special-button
        }

Это не работает. Это правильный способ использовать mixin с scss ?

Комментарии:

1. что вы подразумеваете под «это не работает»? Есть ли где-то ошибка?

2. css, который я применил, не отображается при загрузке моей страницы.

3. если sass не сообщает ни о каких ошибках, вы можете просмотреть созданный им файл .css и посмотреть, все ли классы там отображаются должным образом. Это может дать вам некоторые подсказки к источнику проблемы.

Ответ №1:

Вам не нужен селектор классов в вашем миксине.

Вот почему это не применяется.

 @mixin special-button {
    background: $nav-background;
    height: 2.5em;
    border-radius: .8rem;
}

Измените свой микс на вышеуказанный, и это сработает. У тебя почти получилось. Способ, которым ваш селектор будет работать на основе написанного вами кода, будет искать элемент с классом=»excelGridCell», а затем вложенный элемент с классом=»excelGridCell».

Кроме того, я обычно использую миксины только для того, что нуждается в параметре (потенциально со значением по умолчанию).

В этом случае вы можете просто использовать @extend с некоторым наследованием.

См. раздел «Расширение/Наследование»

в https://sass-lang.com/guide

однако это может быть немного религиозная война https://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/

Метки: