css - 使用 SASS 干燥多个 3 列列表

Question

我有以下 SASS 代码:

ul {

  &.threeColList1 {
    margin: 30px auto 0 auto;
    padding: 0;
    list-style: none;
    width: 775px;
    li {
      width: 225px;
      height: 330px;
      float: left;
      text-align: left;
      margin-right: 50px;
      .name {
       margin-bottom: 5px;
      }
      .position {
        margin-top: 0;
        font-weight: bold;
      }
      &.last {
        margin-right: 0;
      }
    }
  }

  &.threeColList2 {
    margin: 0 auto;
    padding: 0;
    list-style: none;
        width: 850px;
    li {
      width: 225px;
      height: 175px;
      float: left;
      text-align: left;
      margin-right: 75px;

      h3 { font-size: 1.5em; }
      p { font-size: 1.2em; }
      &.last {
        margin-right: 0;
      }
    }
  }
}

您将如何处理 DRY'ing this up？如果不是内部 li 元素，例如 h3、名称、位置、DRY'ing，它会非常简单。您的回答将有助于更多地了解您可以使用 SASS 做什么来保持您的代码干燥。

Answer 1

我将其从 scss 格式转换为 sass 格式，但我认为它应该足够简单。

基础知识是我会重新编写 html 上的类，使其不那么具体，然后在有意义的情况下将内容提取出来。

这是完整的重构:

ul
  &.threeCol
    padding: 0
    list-style: none
    margin: 0 auto
    li
      width: 225px
      float: left
      text-align: left
      &.last
        margin-right: 0

  &.list1
    margin-top: 30px
    width: 775px
    li
      height: 330px;
      margin-right: 50px;
      .name
        margin-bottom: 5px
      .position
        margin-top: 0
        font-weight: bold

  &.list2
    width: 850px
    li
      height: 175px
      margin-right: 75px
      h3
        font-size: 1.5em
      p
        font-size: 1.2em