SCSS/SASS - How to Specify Two Valid Parents for Nested CSS

Question

Question: With SCSS, can we specify two different .main selectors? Say I want another one with margin-top: 50px while also inheriting all other conditions

I have inherited some SCSS from someone else. I have the following SCSS structure:

.main {
  margin-top: 74px;

  ul.tabs {
    position: relative;

    li.tab {
     /*The rest of nested structure*/
             }
          }
       }

It continues to nest (unfortunately) for many layers.

I have some other options (splitting the structure in two) which is a simple fix. Just curious if there's something better.

Thanks!

What distinguishes the second .main selector from the first one? — Erin Halbmaier
– Erin Halbmaier, Commented Aug 3, 2017 at 20:05
@ErinHalbmaier, the difference would be something fairly simple. In this instance, a difference in padding — njho
– njho, Commented Aug 3, 2017 at 21:51
Actually, I meant : is one for a different screen size, does one have another classname with it, etc. :-) — Erin Halbmaier
– Erin Halbmaier, Commented Aug 4, 2017 at 1:55

Our_Benefactors · Accepted Answer · 2017-08-03 20:08:43Z

1

You should use a mixin:

@mixin sharedStyles{
  //shared nested styles go here
}

.parentA{
  margin-top:74px;
  @include sharedStyles;
}

.parentB{
  margin-top: 50px;
  @include sharedStyles;
}

Here is a gist that illustrates the concept:

https://gist.github.com/Ryan-Haines/ba10888d0828d394851d3da6063f70bb

I recommend using sassmeister for rapid prototyping:

https://www.sassmeister.com

answered Aug 3, 2017 at 20:08

Our_Benefactors

3,6273 gold badges25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erin Halbmaier · Accepted Answer · 2017-08-04 01:54:29Z

1

If you use a placeholder, as long as one selector is not inside a media query, it should group them together in the CSS. Ie

%mainStyles {
        border: 1px solid black;
}

.main1 {
    margin-top: 75px;
    @extend %mainStyles;
}

.main2 {
      margin-top: 50px;
      @extend %mainStyles;
}

Should generate

.main1, .main2 {
     border: 1px solid black;
}
.main1 {
    margin-top: 75px;
}

.main2 {
      margin-top: 50px;
}

answered Aug 4, 2017 at 1:54

Erin Halbmaier

3545 silver badges9 bronze badges

Collectives™ on Stack Overflow

SCSS/SASS - How to Specify Two Valid Parents for Nested CSS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related