유형 선택기와 앰퍼샌드 (&)를 사용하여 부모를 결합하는 Sass

Sass에서 중첩하는 데 문제가 있습니다. 다음 HTML이 있다고 가정합니다.

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

다음과 같은 스타일을 중첩하려고하면 컴파일 오류가 발생합니다.

.item {
    color: black;
    a& {
        color:blue;
   }
}

유형 선택기가 동일한 요소의 일부일 때 부모 선택자 앞에 어떻게 참조합니까?

Kumar가 지적했듯이 이것은 Sass 이후로 가능했습니다 3.3.0.rc.1 (Maptastic Maple).

@ at-root 지시문은 부모 선택자 아래에 중첩되지 않고 문서의 루트에서 하나 이상의 규칙을 내 보냅니다.

의도 한 결과에 도달하기 위해 @at-root지시문 을 보간#{} 과 결합 할 수 있습니다 .

SASS

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

출력 CSS

.item {
    color: black;
}
a.item {
    color: blue;
}

@at-root당신은 체인까지 가장 가까운 선택을 확장하려는 경우 - 단지 방법은 문제가 해결되지 않습니다. 예로서:

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

다음으로 컴파일됩니다.

div#id > .element {
    color: blue;
}

.element대신 태그에 가입해야하는 경우 어떻게해야 #id합니까?

이 selector-unify()문제를 해결 하는 함수가 Sass에 있습니다. 이것을 사용하여 @at-root그것을하는 것은 대상에 가능하다 .element.

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

다음으로 컴파일됩니다.

#id > div.element {
    color: blue;
}

우선, (이 답변을 작성할 당시) selector & 를 사용하는 sass 구문이 없습니다 . 그렇게하려면 선택기와 앰퍼샌드 사이에 공백이 필요합니다. 예를 들면 :

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

앰퍼샌드를 사용하는 다른 방법은 아마도 (잘못) 찾고있는 것입니다.

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

이를 통해 다른 클래스, ID, 의사 선택자 등으로 선택자를 확장 할 수 있습니다. 불행히도 귀하의 경우에는 이론적으로 분명히 작동하지 않는 .itema와 같은 것으로 컴파일됩니다.

CSS를 작성하는 방법을 다시 생각하고 싶을 수도 있습니다. 사용할 수있는 부모 요소가 있습니까?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

이렇게하면 다음과 같은 방식으로 SASS를 쉽게 작성할 수 있습니다.

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(참고 : HTML을 살펴 봐야합니다. 작은 따옴표와 큰 따옴표를 혼합하고 href 속성을 p 태그에 넣습니다.)

AFAIK 클래스와 태그의 앰퍼샌드를 동시에 결합하려는 경우 다음 구문을 사용해야합니다.

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

컴파일됩니다

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

다른 용도 (예 : 이전에 클래스 @at-root사용 또는 여러 @at-roots 사용)는 오류를 발생시킵니다.

유용하길 바라

이 기능은 최신 버전의 Sass에 추가되었습니다. 3.3.0.rc.1(Maptastic Maple)

당신이 사용하는 데 필요한 두 밀접하게 관련 기능은 스크립트입니다 &당신이 참조 부모 요소에 중첩 스타일에서 보간 할 수 있습니다, 그리고 @at-root그것은하지 않습니다 루트에 바로 다음 선택 또는 CSS의 블록을 배치 지침을, ( 출력 된 CSS에 부모가 있음)

자세한 내용은이 Github 문제 를 참조하십시오.