部分的にCSSを区切るコード

Question

  1つのファイルでCSSの部分/部分を分離して、より組織化されて読みやすくする方法があるのだろうかと思っていました。我々は要素にいくつかのスタイルを設定する場合たとえば、それはそのように表示されます。 Nodes (plus and minus icon) that can be closed/opened

 だから、私が知りたいことは、オープン/クローズするノードまたは「領域」のようなものを作成するための方法があるさCSSの部分：DIVに使用するすべてのスタイルを1つのパートで、ボタンを別のパートで、などに分割したい場合は、これらのパーツを特に閉じる/開くことができます。

 可能でしょうか？ 私は多くのファイルでCSSを分けることができますが、1つのファイルにまとめたいと思います。

Answer 1

明らかに、Visual Studioはこれを既にCSSのためにサポートしています（Steven Follis' blogにあります）。

リージョンを定義する特定のコメントを追加できます。

構文は次のとおりです。多くはないだろうが

/*#region Description of the region*/ 

.your.css.goes.here { 
} 

/*#endregion*/ 

他のエディタは、当然の似た構文をサポートすることができます。 CSSにはリージョンのネイティブ構文がないため、これらのコメントには構文的な値はなく、この特定のIDEだけで使用されます。

リージョンを使用する以外に、別々のファイルを使用してコードを編成し、スクリプトを使用してそれらを連結することもできます。これは単純なスクリプト、または他の人が示唆しているより高度なプリプロセッサですが、一般的なポイントは、CSSをより柔軟な方法で整理し、ページ内に単一の（できれば最小化する）ファイルがあることです。

これらを使用し始めると、個人的な経験からSCSSをお勧めします。 SASSよりもCSSに近いです。以前はLESSを使っていましたが、その機能の一部が不足しているか、あいまいであると思っていました。 SCSSはより論理的に設計されています。

Answer 2

短い答えではありません。

私はあなたが望むものを持っているとは思えません。しかし、SASS/SCSSやLESSのようないくつかのプリプロセッサがあり、スタイルをネストしてそのように構成できるように設計されています。 SCSSで

は、たとえば、あなたはこのCSSを持つことができます。

.a { 
    /*some styles*/ 
} 
.a.b { 
    /*some styles*/ 
} 
.a .c { 
    /*some styles*/ 
} 

はこのように見ている：

.a { 
    /*some styles*/ 
    &.b { 
    /*some styles*/ 
    } 

    .c { 
    /*some styles*/ 
    } 
} 

しかし、それを使用することができるようにするには、CSSにこのコードをプリコンパイルする必要がありますそれをHTMLページで参照してください。

Sass/ScssとLessの詳細は、自分のウェブサイトでご覧になれます。

Answer 3

私が知る限り、CSS、LESS、またはSASSではどのタイプの領域も使用できません。

メイン：

---

私はLESSと、このアプローチを使用することをお勧めします。以下

@import "header.less"; 
@import "footer.less"; 

header.less

.headerContainer { ... } 
.header { ... } 
.title { ... } 

footer.less

.footerContainer { ... } 
.footer { ... } 
.contact { ... } 

私はあなたが別のファイルを望んでいないと述べた知っているが、これは実際にありますあなたのコードをまっすぐ保つ良い方法ですが、それでもすべてが単一のmain.cssファイルにコンパイルされます。

---

2番目のオプションは単純なコメントです。

/****** Header ***********/ 

.headerContainer { ... } 
.header { ... } 
.title { ... } 


/****** Footer ***********/ 

.footerContainer { ... } 
.footer { ... } 
.contact { ... } 

これは折りたたむことができません。

---

またはサード最悪のオプション...あなたが与えた2つの例では、すべてのdiv sおよびすべてのbutton Sを分離していたからです。

div { 
    &.header { ... } 
    &.headContainer { ... } 
} 

button { 
    &.submit { ... } 
    &.cancel { ... } 
    &.whatever { .. } 
} 

私は本当にこのオプションをお勧めしません。それはclunkyと思われる。