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 */
    }
}

但我不建议最后一个;它会导致输出文件中出现大量不必要的重复。

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

1 个答案: