유형 선택기와 앰퍼샌드 (&)를 사용하여 부모를 결합하는 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-root
s) 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
'Programing' 카테고리의 다른 글
adb를 사용하여 애플리케이션 버전 이름 가져 오기 (0) | 2020.09.11 |
---|---|
한 줄에 여러 명령을 실행하는 방법 (0) | 2020.09.11 |
PostgreSQL에 대해 존재하지 않는 경우 CREATE DATABASE를 시뮬레이션 하시겠습니까? (0) | 2020.09.11 |
Typescript 유형 '문자열'은 유형에 할당 할 수 없습니다. (0) | 2020.09.11 |
전문적인 jQuery 기반 Combobox 컨트롤? (0) | 2020.09.11 |