12

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?

dimitry_n
  • 2,939
  • 1
  • 30
  • 53
  • 1
    Can't you just apply a class name to both lists and style the class accordingly? – Pete Oct 29 '15 at 02:21
  • @pete I actually ended up doing just that, but I still want to see if SCSS provides a programmatic way to achieve what I want (perhaps allow passing *args inside such nested blocks). – dimitry_n Oct 29 '15 at 02:25
  • Why you don't use `mixin`? – Alex Oct 29 '15 at 02:28
  • @alirezasafian can't seem to find anything on using mixins for nested styling. Could you point me in the right direction? – dimitry_n Oct 29 '15 at 02:29
  • 1
    Check [this](https://gist.github.com/alireza-safian/3f00a687a50c076dad09) – Alex Oct 29 '15 at 02:30
  • Have you tried anything? Anything at all? There are a lot of examples in the documentation. You really should be doing a little bit more research before you ask questions. – cimmanon Oct 29 '15 at 02:30
  • Tried http://sass-lang.com/guide's, `mixins`, `nesting` and `inheritance` sections. Could not find what I was looking for in there. I'm sure there are a lot of "examples in the documentation" and SO but I had no idea what to search by. – dimitry_n Oct 29 '15 at 02:37
  • My point is that you didn't *try* anything. You looked at mixins, but did you try writing one? To see if maybe nesting was supported in it? – cimmanon Oct 29 '15 at 02:46
  • @cimmanon yes, I've used simple mixins with and then called them inside a single element with `@include`, but I could not figure out how to use a mixin with nested elements inside. You are probably right, I should have "played" with SASS some more before asking the question, but I was not sure which SASS method would work best in my case. – dimitry_n Oct 29 '15 at 02:52

1 Answers1

24

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;
}
Alex
  • 8,461
  • 6
  • 37
  • 49
  • 1
    Yep, #1 is exactly what I needed! Was not sure which SCSS method can be used to achieve this. – dimitry_n Oct 29 '15 at 02:42
  • Thanks! I just came up with a dynamic combination of the both: Extend from Mixin Check my answer at the duplicate question here https://stackoverflow.com/a/66259322/11155364 – Eagle_ Feb 18 '21 at 11:49