CODEWITHSUNDEEP
csssass
AlbertVR
AlbertVR

Reputation: 50

Best practise: nesting the given CSS in Sass

What would be the 'best Sass' way to nest the following CSS?

.summary-features a,
.summary-description a,
.price .element_prijs1 {
  font-weight: $font-weight-bold;
}

Upvotes: 0

Views: 42

Answers (3)

Marvin
Marvin

Reputation: 10092

Leave it as it is to avoid unnecessary complexity and/or redundancy. There is no such thing as 'best' nesting, but only 'correct' and 'incorrect' semantics.

In your example you could force a nesting like described by Neelam and Jeroen, but this will bring redundancy in and thus worse maintainability. Another option, just to demonstrate the thing with semantics, is to avoid redundancy and do it like this:

.summary-features,
.summary-description,
.price {
  a, .element_prijs1 {
    font-weight: $font-weight-bold;
  }
}

which does not have the same semantics as your CSS snippet. This way also a elements in .price will get bold and .element_prijs1 in .summary-features and .summary-description. So again: just leave it as it is and don't use nesting as an end in itself. It's still valid Sass code.

Upvotes: 1

Jeroen
Jeroen

Reputation: 1166

I believe this would be the best:

.summary-features, .summary-description {
    a {
        font-weight: $font-weight-bold;   
    }
}
.price {
    .element_prijs1 {
        font-weight: $font-weight-bold
    }
}

Upvotes: 0

Neelam Khan
Neelam Khan

Reputation: 1121

I am by no means an expert in all things sass, however this is one way of nesting your sass selectors: 

.summary-features,
.summary-description {
   a {
      font-weight: $font-weight-bold;
   }
}

.price {
   .element_prijs1 {
     font-weight: $font-weight-bold;
   }
}

Upvotes: 0

Related Questions