具有嵌套元素的可重用块 - 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-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-继承Link

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

}

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

}

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

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

Reusable Block with Nested Elements - SCSS

css

sass

mixins