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

유형 선택기와 앰퍼샌드 (&)를 사용하여 부모를 결합하는 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;
    }
}

Will compile to:

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

---

What if you need to join your tag to .element instead of #id?

There's a function in Sass called selector-unify() that solves this. Using this with @at-root it is possible to target .element.

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

Will compile to:

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

---

For starters, (at time of writing this answer) there's no sass syntax that uses selector&. If you were going to do something like that, you'd need a space between the selector and the ampersand. For example:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

The other way of using the ampersand is probably what you're (incorrectly) looking for:

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

This allows you to extend selectors with other classes, IDs, pseudo-selectors, etc. Unfortunately for your case, this would theoretically compile to something like .itema which obviously doesn't work.

You may just want to rethink how you're writing your CSS. Is there a parent element you could use?

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

This way, you could easily write your SASS in the following manner:

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

(Side note: you should take a look at your html. You're mixing single and double quotes AND putting href attributes on p tags.)

---

AFAIK In case you want to combine ampersand for class and tags at the same time, you need to use this syntax:

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

will compile to

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

Other uses (like using the class before @at-root or using multiple @at-roots) will lead to errors.

Hope it'll be useful

---

This feature has landed in the newest version of Sass, 3.3.0.rc.1(Maptastic Maple)

The two closely related features which you'll need to use are the scriptable &, which you can interpolate within a nested styles to reference parent elements, and the @at-root directive, which places the immediately following selector or block of css at the root (it will not have any parents in the outputted css)

See this Github issue for more details

참고URL : https://stackoverflow.com/questions/17268051/sass-combining-parent-using-ampersand-with-type-selectors