5

次のような宣言があるとします (実際には Bootstrap です)。

@media screen and (min-width: 768px) {
  .navbar {
    padding-top: 0;
  }
}

他のクラスまたは mixin と同じように、このメディア クエリ内の .navbar (外部にも宣言があります) にアクセスできますか? 私はその宣言をどこか別の場所で再利用したいと思います（正確にはこれではありませんが、あなたはアイデアを得る:-)）、例えば：

.left-nav {
    .navbar; // Use the one from the media query here.
}

これはLESSで可能ですか？

非常によく似た質問を見たことがありますが、ここでの違いは.navbar、これは Bootstrap の LESS ファイルにあるため、メディア クエリの外にリファクタリングできないこと です。LESS はメディア クエリを気にしないことを理解しています。メディア クエリは単なる別のタイプのセレクターだからです。しかし、これらのセレクター内の宣言にどのようにアクセスできますか (明らかなものをいくつか試しましたが、どちらも機能しませんでした)。

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

4

2 に答える 2

3

たとえば、次のように、それ自体の中から以外にできる方法は知りません。@media

このLESS

@media screen and (min-width: 768px) {
  .navbar {
    padding-top: 0;
  }
  .left-nav {
    .navbar; // Use the one from the media query here.
  }
}

.navbar {
  padding: 20px;
}

この CSS を生成します

@media screen and (min-width: 768px) {
  .navbar {
    padding-top: 0;
  }
  .left-nav {
    padding-top: 0;
  }
}
.navbar {
  padding: 20px;
}

それはあなたがやりたいことではないことは確かです。

ただし、@mediaそれ自体はセレクターではないため (ブラウザーへのクエリ文字列です)、mixin または LESS の名前空間としてそれ自体にアクセスすることはできません。あなたが望む。

私が間違っている場合は、誰かが別の回答を投稿してくれることを願っていますが、私はそれを期待していません。

于 2013-04-24T19:41:24.390 に答える
-1

@media は、LESS を使用する場合、実際には LESS 変数として解釈されます。何も宣言されていない場合は機能しませんが、リテラル文字列でネイティブ CSS の意味に設定された LESS 変数として使用できるため、LESS 変数として @media を次のように設定しています:

@media: "@media";

次に、ネイティブ css で期待するように @media を使用できます。

.random-widget {
    height: 100px;    
    @media (min-width: @screen-sm) {         
        height: 300px;
    }  
}
于 2013-12-06T18:25:43.993 に答える