1

私はオブジェクト指向の Python の世界から来ており、SASS (+compass/susy) と CSS を学んでいるので、基本的な質問について助けが必要です。全体的に、Python で理解しているように、クラスと変数を関連付ける方法を理解するのに苦労しています。

h1ナビゲーション バーがあり、ナビゲーション バー内のすべてのタグを太字にしたいのですh1が、html ドキュメントの本文内のすべてのタグを青くします。自分がやろうとしていることを反映するには、screen.scss ファイルをどのように構成すればよいですか?

もう少し複雑にするためにh2、同じことをしたいタグのように、もっと多くのタグがあるとしましょう（今回はh2それぞれ斜体と赤にしたいのですが）. この場合、ID の代わりにクラス セレクターを使用することはできますか? およびタグが の下にある場合にのみ変更されるように、sass ファイルをネストする方法はありますか? Python では、次のように言います。h1h2class='navbar'

class navbar
    h1 = make it bold
    h2 = make it italic

h1 = make it blue
h2 = make it red

SASS ランドでは、各 html タグを割り当てるだけで (そしてすべてが適切に動作するように)、screen.sass ファイルをどのように構成します<htmltag class='navbar'>か? または、大量の要素でこれを行うためのより良い方法がある場合は、私はオープンですそれも。

ありがとうございました。

4

3 に答える 3

2

ユースケースにクラスや変数は必要ありません。次のような HTML ドキュメントがあるとします (navナビゲーションに要素を使用しているため、navbarクラスは必要ありません)。

<!doctype html>
<html>
  <head>
    <title>An example document</title>
  </head>
  <body>
    <nav>
      <h1>A navigation heading</h1>
      <h2>A subheading</h2>
      <!-- etc. -->
    </nav>
    <main>
      <h1>A general heading</h1>
      <h2>A subheading</h2>
      <!-- etc. -->
    </main>
  </body>
</html>

...次に、質問で尋ねるすべての効果を取得するには、次の SASS で十分です。

nav
  h1
    font-weight: bold
  h2
    font-style: italic

main
  h1
    color: blue
  h2
    color: red

あなたの質問の言い方から、「html の本文」ドキュメントと言うときは、要素内のすべてではなく、ナビゲーション バー内のコンテンツとは別bodyの「メイン」コンテンツを参照していると推測しています (これには navbarが含まれます)。その仮定が間違っていて、実際にすべてに色を付けたいが、navbar の見出しだけを太字/斜体にしたい場合は、次のようにします。

nav
  h1
    font-weight: bold
  h2
    font-style: italic

h1
  color: blue

h2
  color: red
于 2013-08-18T20:27:17.793 に答える
2

あなたの疑似コードは、SASS とほぼ同じです。

.navbar
    h1
        font-weight: bold
    h2
        font-style: italic
body
    h1
        color: blue
    h2
        color: red
于 2013-08-18T20:12:06.407 に答える
0

私の答えはちょっと一般的であることは知っていますが、あなたの質問も一般的であることがわかりました。OOCSS の詳細については、こちらまたはこちらをご覧ください。ブラッドのアトミックデザインもチェックしてみるのもいいですね。プリプロセッサはそれほど重要ではないと思います。それは概念的な問題のようなものです。

于 2013-08-18T20:15:46.097 に答える