私は最近 SASS から Less (作業) に切り替えましたが、この出力を Less から (ミックスインを使用して) 取得できるかどうか疑問に思っていました:
footer {
width: 768px;
@media only screen and (min-width: 992px) {
width:900px;
}
@media only screen and (min-width: 1200px) {
width:1200px;
}
}
(セレクターの下ではなく)次のように、個別のブレークポイントでのみ出力を取得できるようです。
@media only screen and (min-width: 720px) and (max-width: 959px) {
footer {
width: 768px;
}
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
footer {
width: 3939px;
}
}
これは私が使用しているミックスインです:
.respond-to(@respondto; @rules) when (@respondto = "lg") {
@media only screen and (min-width: 1200px) {
@rules();
}
}
.respond-to(@respondto; @rules) when (isnumber(@respondto)) {
@media only screen and (min-width: @respondto) {
@rules();
}
}
そして、それを次のように使用します:
div.class {
.respond-to(120px, {
float:left;
});
.respond-to("lg", {
float:none;
});
}
どんな助けでも大歓迎です!