如何实现与 sass 共享一个元素的不同属性？

Question

我有以下代码：

ul.post, ul.user_profile {
  /* this attributes are the same for both classes */
  margin-top: 1em;
  list-style: none;
  padding-bottom: 20px;
  border-bottom: 1px solid #CCC;

  /* how to implement different attributes for ul.user_profile li.minithumb here? */

  /* this for ul.user_profile */
  li.minithumb {
    float: right;
    margin: 0 auto;
  }

  /* this for ul.post */
  li.minithumb {
    float: left;
    margin-right: 20px;

    span.feed_post_image_not_found {
      width: 80px;
      height: 55px;
      color: #333;
      font-size: 20%;
      padding-top: 25px;
      text-align: center;
      display: block;
      background-color: $lightgray;
    }
  }

Answer 1

你没有有将它们全部嵌套在同一个块中，你总是可以使用不同的：

ul.post, ul.user_profile {
    /* shared */
}

ul.post li.minithumb {
    /* individual */
}
ul.user_profile li.minithumb {
    /* individual */
}

但是如果你想嵌套你可以这样做：

ul {
    &.post, &.user_profile {
        /* shared */
    }

    &.post li.minithumb {
        /* individual */
    }

    &.user_profile li.minithumb {
        /* individual */
    }
}

或者如果真的需要：

ul.post, ul.user_profile {
    /* shared */

    &.post li.minithumb {
        /* individual */
    }

    &.user_profile li.minithumb {
        /* individual */
    }
}

但我真的不推荐最后一个；这会导致输出文件中出现大量不必要的重复。