Question

I have the following code:

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

You don’t have to nest them all in the same block, you could always use different ones:

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

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

But if you want to nest you could do:

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

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

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

Or if really necessary:

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

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

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

But I don’t really recommend that last one; it’d result in a lot of unnecessary duplication in the output file.