13

こんにちは、LessCSS でメディア クエリを実行する方法を知っている人はいますか?

  @media screen and (max-width: 600px) {
      #container{
          width: 480px;
      }
  }

次のエラーが表示されます。

! Syntax Error: on line 23: expected one of :: : . # * - [ @media @font-face , { ; got ( after:

@media screen and

同様に、@font-face および @ を含む CSS3 クエリは、LessCSS のコンパイラと競合します。

ありがとう！

4

6 に答える 6

37

上記の回答はすべて古くなっています。

less.js と lessCss/dotless はどちらも @media と @font-face をサポートしています。

また、ネストされたルールを持つ @media もサポートするようになりました。

.cl {
 @media screen and (max-width: 600px) {
  .d {
   .e {
     background: none;
   }
  }
 }
}

になる

@media screen and (max-width: 600px) {
 .cl .d .e {
   background: none;
 }
}

詳細については、less.js のドキュメントとdotlessのドキュメントを参照してください。

于 2012-04-18T08:02:09.317 に答える
7

私が理解している限りでは、LessCSS は @media をサポートしていません。github のホームページでオープン チケットを見つけることができます。

あなたのケースでこれが機能する唯一の方法は次のとおりです。

<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

受け入れられた回答以降、LessCSS リリースで問題が修正されたようです。

于 2011-01-11T12:18:58.373 に答える
3

less.jsを使用できる場合は、そのまま使用できます。私は同じ例を試しました：

@media screen and (max-width: 600px) {
    #container{
        width: 480px;
    }
}

.cssファイルでもまったく同じように再現されました。less.jsにはエスケープ機能もありますが、それは値に対してのみ機能するように見えるので、これに使用できるとは思いません。

body {
    color: e('red');
}

オリジナルのRubyLessCSSを使用していると思いますか？新しいものに切り替えることができない場合、私が考えることができる他の唯一のことは、@includeを使用することです。これは、HTML内の別のリンクタグよりもわずかに優れている可能性があり、すべてのCSSファイルを圧縮すると、余分なHTTPリクエストを回避できる可能性があります。

于 2011-01-16T21:01:10.303 に答える
2

LESSは現在、メディアクエリに対して特別なサポートを提供していません。つまり、LESSのネストされたルール内にメディアクエリを埋め込むことは不可能であり、開発者はレスポンシブスタイルをコンテキストに保持するのではなく、LESSドキュメントの別のセクションにサイロ化する必要があります。それがどのように機能するかの例を挙げましょう：

LESSの要求からレスポンシブデザインを採用するまで

そうです、今はメディアクエリを使用できますが、ネストされた構文でそれらを記述することはできません。

そのブログ投稿のコメントをチェックして、後でless.jsにロールインされるように見えるいくつかの提案されたソリューションを確認してください。

于 2011-02-13T11:17:08.487 に答える
0

そこで、単純な @media print { .no-print {display:none;}} を次の参照先の .less ファイルに追加しました。

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less">

そしてそれはうまくいきません。ただし、css の達人は、.lesses のデフォルトではメディア タイプのスクリーンを使用することを指摘しているため、参照先の less リンクを次のように変更すると、

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">

すると突然、less ファイル内の @media プリントが取得され、通常どおりに機能し始めます。

うまくいけば、これは私と同じように混乱している他の誰かを助けるでしょう.

于 2012-05-02T17:44:24.240 に答える
0

プロジェクトで使用していますが、機能することがわかりませんでした。

less で管理されていない外部 css ファイルを作成します。less css ファイルは font-face にアクセスできます。

于 2011-01-16T12:43:44.360 に答える