학부모 용 클래스 사용

Question

Ive가 답변을 검색하려고했지만 잘못된 질문을하고있는 것 같습니다.

나는 "규칙 부모"클래스를 만들려고 노력하고 있는데, 규칙을 멋지게 나누어 여러 파일에 나누어 사용할 수 있습니다. 부모의 구조는 다음과 같이 될 것이다 :

.parent { 
    .child { 
     //some rules here 
    } 

그때 (여기 가짜 구문을 사용하여) 더 요소

@[custom class name]: 
.parent { 
    //some rules 
    .child { 
     color: #000 
    } 

을 정의하는 데 도움이 부모와 자식 클래스를 가져올 수 있도록하려면

그런 다음 내 사용자 정의 클래스 이름을 사용하여, 내가 좋아하는, 또 다른 선택의 부모로이를 지정할 수 있습니다

@[custom class name] { 
    .grand-child { 
       background-color: #fff; 
    } 
} 

이 다음과 같은 규칙을 생성 할

.parent .child .grand-child { 
    color: #000; 
    background-color: #fff; 
} 

Answer 1

지금처럼 @content 지시어를 사용하는 믹스 인을 만들 수이 일을하는 한 가지 방법 : 다음

@mixin selectors { 
    .parent { 
    .child { 
     @content; 
    } 
    } 
} 

, 당신은 .parent .child에서 둥지 뭔가 원하는 시간, 당신은 작성합니다

@include selectors { 
    .grand-child { 
    color: #000; 
    } 
} 

다음 CSS 출력 될 것이다 :

.parent .child .grand-child { 
    color: #000; 
} 

Answer 2

언제든지 & 선택기를 사용할 수 있습니다.

.grand-child{ 
    .parent .child & { 
     color: #000; 
    } 
} 

이이

.parent .child .grand-child{ 
    color: #000; 
} 

로 컴파일 또는 어쩌면 당신은 또한 @extend을 찾고 있습니다 : .grand - 아이가 다른 파일에있는 경우

, 당신이 뭔가를 할 수 있습니다 가능성? 당신이 .parent .child에서 스타일을 얻고 그랜드 아이에 추가,하지만 유행에 따라 디자인하는 것

.grand-child{ 
    @extend .parent .child; 
    color: #000 
} 

이를 추가

, 그것은 위의 선택을 변경하지 않습니다.