SASS соблюдает порядок примесей
Как я могу заставить SASS соблюдать порядок миксина:
Вход SASS:
@mixin containerMargins {
margin: 4rem 10vw;
@media only screen and (min-width: 768) {
margin: 7rem 10vw;
};
@media only screen and (min-width: 1024) {
margin: 7rem 20vw;
};
}
.myContainer {
@include containerMargins;
margin-top: 0;
}
Выход SASS:
.myContainer {
margin: 4rem 10vw;
margin-top: 0; /* I want this to be at the bottom */
}
@media only screen and (min-width: 768) {
.myContainer {
margin: 7rem 10vw;
}
}
@media only screen and (min-width: 1024) {
.myContainer {
margin: 7rem 20vw;
}
}
Желаемый результат:
.myContainer {
margin: 4rem 10vw;
}
@media only screen and (min-width: 768) {
.myContainer {
margin: 7rem 10vw;
}
}
@media only screen and (min-width: 1024) {
.myContainer {
margin: 7rem 20vw;
};
}
.myContainer {
margin-top: 0;
}
Как я могу сделать так, чтобы margin-top был последним? т. е. все в миксине (включая запросы @media) должно стоять перед margin-top. Это возможно?
@disinfor Обновил вопрос, указав, что я хочу, надеюсь, он более понятен.
Ваш вывод недействителен. Посмотрите, где находится margin-top: 0. Это вне всех селекторов. Вы хотите margin-top: 0 внутри запроса media?
Ответы 3
Самый простой способ, которым я бы пошел, это:
.myContainer {
@include containerMargins;
}
.myContainer {margin-top: 0; }
Это действительно работает. Интересно, есть ли менее хакерский ответ.
похоже, что вы удваиваете верхнюю часть поля здесь в сокращении:
margin: 4rem //-> Верх + низ 10vw // лево + право-> ;
а затем добавив «margin-top: 0;
Попробуйте что-то вроде этого:
@mixin containerMargins {
@media only screen and (min-width: 768) {
margin: 7rem 10vw;
};
@media only screen and (min-width: 1024) {
margin: 7rem 20vw;
};
}
.myContainer {
@include containerMargins;
margin-top: 0;
}
OR
@mixin containerMargins {
margin: 4rem 10vw;
@media only screen and (min-width: 768) {
margin: 7rem 10vw;
};
@media only screen and (min-width: 1024) {
margin: 7rem 20vw;
};
}
.myContainer {
@include containerMargins;
}В зависимости от желаемого результата.
Я бы создал параметры для вашего миксина, чтобы вы могли передать значение свойства margin-top:
@mixin containerMargins( $sm:'', $md:'', $lg:'' ) {
margin: 4rem 10vw;
margin-top: #{$sm};
@media only screen and (min-width: 768) {
margin: 7rem 10vw;
margin-top: #{$md};
};
@media only screen and (min-width: 1024) {
margin: 7rem 20vw;
margin-top: #{$lg};
};
}
.myContainer {
@include containerMargins('','','0');
}
Это выводит:
.myContainer {
margin: 4rem 10vw;
}
@media only screen and (min-width: 768) {
.myContainer {
margin: 7rem 10vw;
}
}
@media only screen and (min-width: 1024) {
.myContainer {
margin: 7rem 20vw;
margin-top: 0;
}
}
Если вы оставите параметры @include containerMargins(); пустыми, он выведет этот CSS:
.myContainer {
margin: 4rem 10vw;
}
@media only screen and (min-width: 768) {
.myContainer {
margin: 7rem 10vw;
}
}
@media only screen and (min-width: 1024) {
.myContainer {
margin: 7rem 20vw;
}
}
Тогда это не повлияет на свойство margin-top.
Именно то, что мне было нужно, спасибо. Использование наследования действительно сломало мой css.
Потрясающий! Да, я удалил его. Я забыл, что inherit берет стиль от родителя. Обновленный ответ полностью удаляет свойство, если в качестве параметра явно не передается значение.
Что вы имеете в виду
at the bottom? Если вы посмотрите на свой вывод, запросыmediaВНЕ вашего класса. Кроме того, вам нужно добавитьpxк вашим размерамmin-width, иначе ваши медиа-запросы все равно ничего не сделают.