리팩터링 SCSS

Question

이의 내가 이것을 달성하고 싶은 말은하자

#page { 
    p { 
    margin: 10px 20px; 
    color: white; 
    padding: 10px; 
    } 
    #form { 
    p { 
    color: gray; 
    } 
    } 
} 

당신은 모든 #page의 p가 일반적인 스타일을 가지고하도록되어 있음을 알 수 있습니다. 그러나 #page #form은 color을 제외한 일반 p을 상속해야합니다.

더 좋은 방법이 있나요?

감사합니다.

Answer 1

아니요, 스타일 속성에 대해 there is no way to restore the "default" value입니다.

당신은 그렇지 #page p 반드시 모든 단락 #page #form p 일치 일치, #page > p와 #page의 직계 후손들만 단락에 #page p 스타일을 제한 할 수 있습니다. #page p 스타일 은이 적용되며, #page #form p으로 실행 취소하려는 경우 스타일을 명시 적으로 지정해야합니다.

Answer 2

@extend를 사용할 수 있지만 상속 된 선택기에서는 사용할 수 없습니다.

당신은을 사용할 수 @ 확장 만 선택을과 같이 :

#page { 
    %common_p { 
     margin: 10px 20px; 
     color: white; 
     padding: 10px; 
    } 

    p { 
     @extend %common_p; 
    } 

    #form { 
     p { 
      @extend %common_p; 
      color: gray; 
     } 
    } 
} 

출력하는 나는 이것이 당신이 원하는 무엇을 달성 희망

#page p, #page #form p { 
    margin: 10px 20px; 
    color: white; 
    padding: 10px; } 
#page #form p { 
    color: gray; } 

로!

캐스케이드로 인해 #form 내의 p 태그가 이미 #page의 p 태그를 얻는 경우에도 이것이 더 좋은지 잘 모르겠습니다. 예 : 여백과 채우기 및 색상을 얻을 수 있지만 색상을 덮어 씁니다.

계단식 현상이 발생하지 않았더라도 (예 : #form이 #page 외부에 존재하는 경우) 단순히이 작업을 수행해야합니다. 그렇다면 SASS가 스타일을 결합하여 출력을 덜 반복적으로 만들 수 있으므로이 기법이 더 좋을 것입니다.

@extend의 ​​작업에 대한 자세한 내용은 http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders

입니다.