具有嵌套元素的可重用块 - SCSS [重复]

Question

假设我在一个样式表中有两个无序列表。两者都应该使用相同的样式，但都嵌套在不同的父元素中：

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

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

有没有办法创建类似于 Rails 的部分代码，其中单个代码块可以在不同的父元素中重用/呈现？

Answer 1

解决方案：

1-混合 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-继承 Link

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

}

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

}

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