1

私は最近 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;
   });
}

どんな助けでも大歓迎です!

4

1 に答える 1