CODEWITHSUNDEEP
cssruby-on-rails-3.2sass
Bohn
Bohn

Reputation: 26919

Rails and SCSS working together

If I go with this style of coding where for a scaffold of "Products" I add this to the applications.html.erb:

<body class = '<%= controller.controller_name %> ' >

and then in the stylesheets of products.css.scc I define it nested like this for "products" :

.products {
  table {
    border-collapse: collapse;
  }

  table tr td {
    padding: 5px;
    vertical-align: top;
  }

  .list_image {
    width:  60px;
    height: 70px;
  }

  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }

    dt {
      color:        #244;
      font-weight:  bold;
      font-size:    larger;
    }

    dd {
      margin: 0;
    }
  }
// .... continued...

and then in the products/index/index.html.erb for example I can have stuff like <td class = "list_description" > , ...

So my question is then do I need some sort of fully qualified naming to access the nested classes in that css file? or I can just name them without their hierarchy?

I saw this way of doing CSS in DHH's agile book - well he created Rails! - but in Michael Hartl's book he is doing it a little more traditional was of CSS embedding . So which one is better?

Upvotes: 0

Views: 60

Answers (1)

Matt
Matt

Reputation: 10564

This is more of a CSS question.

Nested CSS selectors are proposed for CSS3, but Sass will handle them now. What they are doing is they are "namespacing" the selectors under a different element: so you can just use class="list_description" as long as it is inside an element with class="products"

In other words, Sass will translate the above to this equivalent rule:

.products .list_description {
  width:60%;
}

which will match this:

<div class="products">
  <div class="list_description">Matches</div>
</div>

but not this:

<div class="products"></div>
<div class="list_description">Does not match: not inside a "products" classed element.</div>

Upvotes: 1

Related Questions