我的文件中有這個(gè)scss：$min-phone: 320px;$retina-phone: #{"only screen and (min-width: #{$min-phone})"};并嘗試像這樣使用它p { @media $retina-phone { font-size: 12; }}但是編譯css時(shí)失敗了。我究竟做錯(cuò)了什么？
2 回答
www說(shuō)
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超8個(gè)贊
您需要從您的代碼中檢索 var，就像您對(duì)另一個(gè)代碼所做的那樣： #{$retina-phone}
那么結(jié)果是：
$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貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以創(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 關(guān)注
- 143 瀏覽
添加回答
舉報(bào)
0/150
提交
取消