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

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