@mediaおよび @font-faceサポートLesscss

StackOverflow https://stackoverflow.com/questions/4474477

  •  11-10-2019
  •  | 
  •  

質問

こんにちは、誰かが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は、 @ constry with relstcssのコンパイラとクエリです。

ありがとう！

役に立ちましたか？

解決

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

あなたの場合にこれが機能するために私が見る唯一の方法は、これです：

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

その問題は、受け入れられた答え以来、LessCSSリリースで修正されているように見えます。

他のヒント

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

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ドキュメント と ドットレスドキュメント 詳細については。

使用できる場合 less.js, 、箱から出してすぐに動作します。同じ例を試しました：

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

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

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

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

現在、メディアクエリに対する特別なサポートは提供されていません。これは、Lessのネストされたルールにメディアクエリを埋め込むことが不可能であり、開発者がコンテキストに維持するのではなく、Less Documentの別のセクションでレスポンシブスタイルをサイロに強制することを意味します。それがどのように機能するかの例を教えてください：

から レスポンシブデザインを受け入れることを少なくするという呼びかけ

したがって、はい、今すぐメディアクエリを使用できますが、ネストされた構文でそれらを書くことはできません。

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

私たちはそれを私たちのプロジェクトで使用し、それが機能することは決してありませんでした。

外部CSSファイルを作成します。より少ないCSSファイルは、フォントフェイスにアクセスできます。

そこで、simple @media print {.no-print {display：none;}}を次の参照ファイルに追加しました。

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

そして、それはうまくいきません。しかし、私たちのCSSの第一人者は、.lessesデフォルトはメディアタイプの画面を使用することであると指摘しました。 

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

その後、突然、より少ないファイルの@media印刷がピックアップされ、通常ごとに動作を開始します。

うまくいけば、これが私と同じように他の誰かを混乱させるのに役立ちます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top