How can I simplify this SASS statement?

Question

How can I simplify this SASS so that I only write .question-sector-answer the once? I need to apply different styles to the .question-sector-answer if the parent div has a class of both .question-row and .question-review. This currently seems unwieldy and I'm sure could be simplified and made more elegant:

.question-row {
  border-bottom: 1px solid #ddd;
  &.question-review {
    .question-sector-answer {
      padding-top: 30px;
    }
  }
  .question-sector-answer {
    padding: 15px;
  }
}

score 0 · Accepted Answer · answered Apr 11 '14 at 17:32

I don't see how you can simplify it. You need to use 2 different styles for .question-sector-answer under different parents. Since it's impossible in css to access parent selector, you have no choice but do what you did (well, in SASS you kind of can - see below). Although my personal preference to always put more generic selectors on top and more specific ones to the bottom like so:

.question-row {
  border-bottom: 1px solid #ddd;
  .question-sector-answer {
    padding: 15px;
  }
  &.question-review {
    .question-sector-answer {
       padding-top: 30px;
    }
  }
}

So in SASS you can access parent selector with & using it in certain way, but I don't think you can recreate your styles with it, the best I could come up with was this but it looks uglier than your original way of doing it, but you're welcome to play with it:

.question-row {
   border-bottom: 1px solid #ddd;
}
.question-sector-answer
{
  .question-row & {
     padding-top: 15px;
  }
  .question-row.question-review &
  {
     padding: 30px;
  }
}

You can read more about accessing parent selectors with & here

Thank you for your input. I think this is probably the preferred approach. — Rikkiebags, Apr 15 '14 at 09:41

iamnotsam · Answer 2 · 2014-04-12T05:02:49.107

0

.question-row {
  border-bottom: 1px solid #ddd;
}
  .question-sector-answer {
    padding: 15px;
    .question-review & {
      padding-top: 30px;
    }
  }

De-nesting here does two things: (1) creates terser, more flexible CSS and (2) allows the parent & selector. To compensate for the decrease in OOP, we slightly indent to imply subjugation. But in SASS you want to avoid the temptation to nest when not totally necessary, because nesting for OOP's sake tends to create more problems than it solves.

edited Apr 12 '14 at 05:02

answered Apr 12 '14 at 04:51

iamnotsam

9,470
7
33
30

in your css the first `.question-sector-answer` has no parent and the second one has only `.question-review` as a parent.. not really what he was asking for, unless he can lives with that – dima Apr 12 '14 at 18:14

How can I simplify this SASS statement?

2 Answers2