2012-03-02 6 views
0

나는 다음과 같은 코드가 있습니다Sass와 하나의 요소를 공유하는 여러 속성을 구현하는 방법은 무엇입니까?

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

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

그러나 당신이 원하는 경우에 : 당신은 그들이 동일한 블록의 모든, 당신은 항상 다른 사람을 사용할 수 가 둥지에

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; 
    } 
    } 

답변

0

을하지 않습니다 둥지 당신은 할 수 :

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

하지만 마지막으로 권장하지는 않습니다. 출력 파일에 불필요한 중복이 많이 생길 수 있습니다.

+0

쿨! 감사합니다 @ 릭! 중첩을 통해이 작업을 수행하는 방법을 알고 싶었습니다. 완벽하게 작동합니다! –

관련 문제