為什么當嵌套在類規則中時,mixin 評估為包含父類(.btn-rounded)?
引導/scss/mixins:
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
樣式.scss:
.btn-rounded {
@include media-breakpoint-down(sm){
display: none;
}
position: relative;
background-color: white;
}
樣式.css:
.btn-rounded {
position: relative;
background-color: white;
}
@media (max-width: 575.98px) {
.btn-rounded {
display: none;
}
}
uj5u.com熱心網友回復:
像這樣的媒體查詢@media (max-width: 575.98px)必須是 css 中的頂級。因此,要使編譯后的 css 正常作業,它需要取消嵌套并出現在頂層。
SASS 會自動為您執行此操作。
為了讓規則定位到正確的元素——即使它沒有被嵌套——它也需要重復選擇器 ( .btn-rounded)。
您可以在他們的檔案中了解有關媒體查詢的更多資訊。
我還發現這篇文章對于如何在 sass中解決這個問題非常有用。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/429644.html
