Как реализовать разные атрибуты, разделяющие один элемент с 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 */
}

Но если вы хотите вложить, вы можете сделать:1006 *

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

Но я не очень рекомендую этот последний;это приведет к большому количеству ненужного дублирования в выходном файле.