Dynamic : SASS의 마지막 자식

Question

나는 SASS를 오래 동안 사용하고 있지만, ifif를 사용하는 멋진 함수를 만들었지 만, 다음 두 가지 코드가 Mixin :

&:last-child { float: right; margin-right: 0; } 
&:only-child { float: left; margin-right: 0; } 

분명히이 특정 Mixin을 포함하는 모든 요소에이 두 코드를 적용합니다. 자식이 @if 문이나 다른 메서드를 가진 자식인지 여부를 동적으로 검사하는 방법이 있습니까? 같은

뭔가 :

@if :last-child == True { float: right; margin-right:0; } 

는 다행스럽게도 필자는 충분히 있다고 설명했습니다.

감사합니다.

Answer 1

Sass는 사용자 문서에 대해 아무것도 모릅니다. 요소가 첫 번째 자식인지 아니면 유일한 자식인지 확인할 수 없습니다. Sass는 유효한 CSS를 생성하는 데에만 사용할 수 있습니다.

당신은 전용 아이가 아닌 마지막으로 아이를 찾고 있다면, 이것은 당신의 선택입니다 :

&:last-child:not(:only-child) { 
    // styles 
} 

http://tinker.io/1717b

당신이 하나의 출력을 해제하고자하는 경우 다른 하나는 (이미이 인스턴스에 하나만 적용 할 수 있음을 알고 있기 때문에) 추가 인수가 믹스 인에 전달되어야합니다.

@mixin foo($children: true) { 
    @if $children or $children == last-child { 
    &:last-child { 
     // styles 
    } 
    } 
    @if $children or $children == only-child { 
    &:only-child { 
     // styles 
    } 
    } 
}