我的文件中有這個scss：$min-phone: 320px;$retina-phone: #{"only screen and (min-width: #{$min-phone})"};并嘗試像這樣使用它p { @media $retina-phone { font-size: 12; }}但是編譯css時失敗了。我究竟做錯了什么？
2 回答
www說
TA貢獻1775條經驗 獲得超8個贊
您需要從您的代碼中檢索 var，就像您對另一個代碼所做的那樣： #{$retina-phone}
那么結果是：
$min-phone: 320px;
$retina-phone: #{"only screen and (min-width: #{$min-phone})"};
p {
@media #{$retina-phone} {
font-size: 12;
}
}
它將編譯為
@media only screen and (min-width: 320px) {
p {
font-size: 12;
}
}
HUX布斯
TA貢獻1876條經驗 獲得超6個贊
您可以創(chuàng)建@mixin：
@mixin respond-below($breakpoint) {
// If the breakpoint exists in the map.
@if map-has-key($breakpoints, $breakpoint) {
// Get the breakpoint value.
$breakpoint-value: map-get(
$breakpoints,
$breakpoint
); // Write the media query.
@media (max-width: ($breakpoint-value - 1)) {
@content;
}
// If the breakpoint doesn't exist in the map.
} @else {
// Log a warning.
@warn "Invalid breakpoint: #{$breakpoint}.";
}
}
- 2 回答
- 0 關注
- 132 瀏覽
添加回答
舉報
0/150
提交
取消