web-dev-qa-db-ja.com

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

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

このマークアップの断片を考えると（意図的に任意）：

<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の質問であるとは思わないか、SOに入れたでしょう。

htmlcss
8
jcolebrand

レスCSS

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

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

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

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

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

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

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

6
Mladen Jablanović