ネストされたCSSスタイル〜このコンセプトはどこで見たことがありますか?


8

私はこれを今見つけることができませんが、トピックについて議論しているさまざまなブログで以前に読んだことがあります。私は例を挙げますが、うまくいけばそれは明確です(それはまったく何も明確化しないかもしれませんが)。

このマークアップを考えると(意図的に任意):

<div class="myWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>
<div class="yourWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>

CSSは次のように読み取ることができます。

.myWrapper .img img {border: thin black solid;}
.myWrapper .img {margin:10px;}
.yourWrapper .img img {border: thick red dashed;}
.yourWrapper .img {margin:20px;}

次のように書くこともできます:

.myWrapper {
  .img { 
    margin:10px;
    img {
        border: thin black solid;
    }
  }
}
.yourWrapper {
  .img { 
    margin:10px;
    img {
        border: thick red dashed;
    }
  }
}

しかし、それがどこで議論されたのか、あるいはそれが作品の中にあるのかを見たのを思い出せません。誰が私が何について話しているのか知っていますか?

そして、これはSOの質問ではないと思います。


<strike>マージンと同じスタイルを生成しないメモだけimg.imgクラス内の要素になります。</ strike>
Josh K

@JoshK〜なぜですか?おそらく私がLessCSSのものを実際に再読み込みすると私の記憶が更新されますが、あなたはgoogleより速いようです;)
jcolebrand

ああ、閉店に間に合いません}でした。私は今それらを片付けるつもりです。
ジョシュK

ええ、以前のものはインラインだったのでインラインでそれらを残しました、私が見たCSSスタイルで順序が重要であるかどうかわかりませんでした。酒;)〜が、私は編集を気にしない、私は持っているように担当者電力:D
jcolebrand

回答:


21

CSSが少ない

Alexis Sellierによって設計された動的スタイルシート言語。これはSassの影響を受け、CSSのようなブロック形式の構文を採用したSassの新しい「SCSS」構文に影響を与えました。LESSはオープンソースです。最初のバージョンはRubyで作成されましたが、それ以降のバージョンでは、Rubyの使用は非推奨になり、JavaScriptに置き換えられました。有効なCSSは同じセマンティクスの有効なLESSコードであるため、LESSのインデントされた構文はネストされたメタ言語です。LESSは次のメカニズムを提供します。変数、ネスト、ミックスイン、演算子、関数。LESSと他のCSSプリコンパイラの主な違いは、LESSはブラウザでLESS.jsを介してリアルタイムでコンパイルできることです。] LESSはクライアント側とサーバー側で実行できます。またはプレーンCSSにコンパイルできます...

LESSはそれらのネストされたスタイルを使用します。

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

egads you're fast;)
jcolebrand

私たちは、LOVEドットなしを。
quentin-starin 2010


6

また、sassとscssはネストをサポートしています。

SassはCSS3の拡張で、ネストされたルール、変数、ミックスイン、セレクター継承などが追加されています。コマンドラインツールまたはWebフレームワークプラグインを使用して、適切にフォーマットされた標準のCSSに変換されます。

Sassには2つの構文があります。最も一般的に使用される構文は「SCSS」(「Sassy CSS」の略)と呼ばれ、CSS3の構文のスーパーセットです。つまり、有効なCSS3スタイルシートはすべて有効なSCSSでもあります。SCSSファイルは拡張子.scssを使用します。

2番目の古い構文は、インデントされた構文(または単に「.sass」)として知られています。Hamlの簡潔さに触発され、CSSとの類似性よりも簡潔さを好む人を対象としています。角括弧とセミコロンの代わりに、行のインデントを使用してブロックを指定します...

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.