Question

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

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

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

有没有办法创建类似于Rails的东西＆＃39; partial，哪个单独的代码块可以在不同的父元素中重用/呈现？

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

1 个答案: