Reusable Block with Nested Elements - SCSS [duplicate]

Question

Say I have two unordered lists in one stylesheet. Both should be using the same styling, but both are nested in different parent elements:

#foo{
  position:absolute;
  ...
  ul{
    list-style-type:none;
    li{
      color:red;
      ...
    }
  }
}

#bar{
  position:relative;
  ...
  ul{
    list-style-type:none;
    li{
      color:red;
      ...
    }
  }
}

Is there a way to create something similar to a Rails' partial, where a single block of code can be reused / rendered inside different parent elements?

Answer 1

Solutions:

1-Mixins Link

@mixin ul-style ()
{
   ul{
    list-style-type:none;
    li{
      color:red;
    }
  }
}

#foo{
  position:absolute;
  @include ul-style();
}

#bar{
  position:relative;
  @include ul-style();
}

2-Inheritance Link

.ul-style
{
  ul
  {
    list-style-type:none;
    li{
      color:red;
    }  }

}

#foo{
  position:absolute;
  @extend .ul-style;

}

#bar{
  position:relative;
  @extend .ul-style;
}