Extender Selector Parent

Question

How do I extend settings from a Parent selector? (only it)

ul {
  background: red; /* Não incluir esse! */
}
#menu {
  ul {
    margin-left: 20px;

    ul {
      @extend #menu ul; // <= Dessa forma dá erro :(
    }
  }
}

I need you to come back:

#menu ul, #menu ul ul {
  margin-left: 20px;
}

(Not including "background: red")

Answer 1

That way it should work, you create the variable and us the @extend to include the style. Another thing the syntax you put in is SCSS and not SASS.

First see that:

A limitation of Sass extend is that it cannot extend a nested selector.

See that according to this source vc cannot extend the class to nested selectors. https://css-tricks.com/the-extend-concept/

But with the @extend You can solve it that way.

That SCSS:

%ml { margin-left: 20px; }

ul {
  background: red;
}
#menu {
  ul {
    @extend %ml;

    ul {
      @extend %ml;
    }
  }
}

Generates this output:

#menu ul ul, #menu ul {
  margin-left: 20px;
}

ul {
  background: red;
}

---

Option with @mixin

That way it should work too, tap the @extent by a @mixin.

That SCSS:

@mixin margem-l { margin-left: 20px; }

ul {
  background: red; 
}
#menu {
  ul {
    @include margem-l;
    ul {
      @include margem-l;
    }
  }
}

Generates this output:

ul {
  background: red;
}
#menu ul {
  margin-left: 20px;
}
#menu ul ul {
  margin-left: 20px;
}

---

TIP:

Another option would be to do only with native CSS variables, the custom variables

See an example application below. I first set a variable on the universal dial * {} and then called the value --mb: Npx of it directly in the element. Thus in any element that you put --mb + valor you’ll be giving a margin-bottom of value size

* {
  margin-bottom: var(--mb);
}
.item1 {
    --mb: 20px;
    background: red;
}
.item2, .item3 {
   --mb: 40px;
   background: blue;
}
.item3 {
   background: green;
}

<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="">item4</div>