CODEWITHSUNDEEP
csssassnested
GRowing
GRowing

Reputation: 4727

Nested Elements and Concatenating Classes using Sass

I can't seem to get this to work.. I wonder if this is not doable the way I imagine it or I am just in a state of brain fry at the moment..

I have two blocks of html with classes sort of distributed like this:

<div class="my-class">
  <div class="my-class-parent-one">
    <div class="my-class-wrapper">
      <div class="my-class-child"></div>
      <div class="my-class-child"></div>
    </div>
  </div>
<div>

<div class="my-class">
  <div class="my-class-parent-two">
    <div class="my-class-wrapper">
      <div class="my-class-child"></div>
      <div class="my-class-child"></div>
    </div>
  </div>
<div>

My Sass...

.my-class {
  &-parent-one &-wrapper &-cell { font-size: 1.15rem; }
  &-parent-two &-wrapper &-cell { font-size: 0.85rem; }
}

Should this not be equivalent to this: ??

.my-class .my-class-parent-one .my-class-wrapper .my-class-child {}    
.my-class .my-class-parent-two .my-class-wrapper .my-class-child {}

Upvotes: 0

Views: 321

Answers (3)

Krypt1
Krypt1

Reputation: 1066

Your Sass will be compiled to this:

.my-class-parent-one .my-class-wrapper .my-class-cell {
  font-size: 1.15rem;
}
.my-class-parent-two .my-class-wrapper .my-class-cell {
  font-size: 0.85rem;
}

Note that there will be no .my-class selector in the beginning. To add the .my-class you would need to change your Sass:

.my-class {
  & &-parent-one &-wrapper &-cell { font-size: 1.15rem; }
  & &-parent-two &-wrapper &-cell { font-size: 0.85rem; }
}

Here's more detailed text on the ampersand in Sass: The Sass Ampersand

Upvotes: 3

Richard
Richard

Reputation: 96

Your SASS would compile out like so:

.my-class-parent-one .my-class-wrapper .my-class-cell {
  font-size: 1.15rem;
}
.my-class-parent-two .my-class-wrapper .my-class-cell {
  font-size: 0.85rem;
}

http://www.cssportal.com/scss-to-css/

Upvotes: 2

Adam Fratino
Adam Fratino

Reputation: 1241

When you chain an ampersand with SASS nesting it will just use the parent name to continue to the next class. If you want to use the ampersand to include .my-class before the continuation you'll need to add a stand-alone ampersand before:

.my-class {
  & &-parent-one &-wrapper &-cell { font-size: 1.15rem; }
  & &-parent-two &-wrapper &-cell { font-size: 0.85rem; }
}

Upvotes: 2

Related Questions