1

I am coming from object-oriented Python-land and need help with a basic question as I learn SASS (+compass/susy) and CSS. Globally, I am struggling to understand how to relate classes and variables as I understand it in Python.

I have a navigation bar and want all h1 tags in the navbar to be bold, but all h1 tags in the body of the html doc to be blue. How would I structure my screen.scss file to reflect what I am trying to do?

To make it a little more complicated, let's say I have more tags, like an h2 tag that I want to do the same thing with as well (except this time I want h2 to be italic and red respectively). In this case, can I start using a class selector instead of an id? Is there a way to nest my sass file such that h1 and h2 tags are only modified if they are under class='navbar'? In python, I would say something like:

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

h1 = make it blue
h2 = make it red

In SASS-land, how would you structure your screen.sass file such that I can just assign each html tag (<htmltag class='navbar'> and everything behaves appropriately? Or, if there is a better way to do this with a ton of elements, I am open to that as well.

Thank you.

4

3 回答 3

2

Your pseudo-code is almost exactly the same as SASS:

.navbar
    h1
        font-weight: bold
    h2
        font-style: italic
body
    h1
        color: blue
    h2
        color: red
于 2013-08-18T20:12:06.407 回答
2

You don't need classes or variables for your use case. Say you have a HTML document like this (notice that we're using a nav element for navigation, so there's no need for a navbar class):

<!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>

... then to get all of the effects you ask about in your question, the following SASS is enough:

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

main
  h1
    color: blue
  h2
    color: red

I'm assuming from the way you word your question that when you say 'the body of the html' document, you're referring to some 'main' content which is separate from that in the navbar, rather than everything in the body element (which would include the navbar). If that assumption is wrong and you do indeed want everything to be coloured, but only navbar headings emboldened/italicized, you'd do this:

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

h1
  color: blue

h2
  color: red
于 2013-08-18T20:27:17.793 回答
0

I know that my answer is kinda generic, but I found your question also generic. I'll suggest to read more about OOCSS, here or here for example. It's also a good idea to check the Brad's Atomic design. I don't think that preprocessor matter so much. It's more like a conceptual problem.

于 2013-08-18T20:15:46.097 回答