Extend parent selector

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

First you see that:

  The limitation of Sass extends is that it can not be extended to a nested selector.

You can not extend the class for nested selectors to this font as . link

But with @extend you can solve it that way.

This SCSS:

%ml { margin-left: 20px; }

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

    ul {
      @extend %ml;
    }
  }
}

Generate this output:

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

ul {
  background: red;
}

Option with @mixin

This should also work, touch @extent by @mixin .

This SCSS:

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

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

Generate this output:

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

TIP:

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

See an example application below. First I set a variable in the universal selector * {} and then I called the --mb: Npx value of it directly in the element. This way in any element that you put --mb + valor you will be giving a margin-bottom of the size of the value

* {
  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>