Sass 문법에서 많이 사용하진 않지만
알고 있으면 유용하게 사용할 상황이 생기지 않을까하여 포스팅하게 되었다.
unique-id 는 말 그대로 고유한 id값을 생성해서 Sass 문법을 작성할 수 있게 도와준다.
1. unique-id() 란
예시를 보면 이해할 수 있다.
/* SCSS */
$id: unique-id();
.#{$id}{color:red}
/* CSS Compiled */
.u4a1gxy {
color: red;
}$id라는 변수에 unique-id() 를 사용하게 되면
임의의 문자열이 정의된다.
css로 컴파일 된 내용을 봤을때도 .u4a1gxy라는 임의의 값이 출력 된 것을 볼 수 있다.
물론 새로 저장해서 컴파일을 다시 하게되면 해달 값은 또 바뀐다.
2. unique-id() 응용
위의 예시와 같이 클래스를 unique-id를 통해 사용하게 된다면
html 구조상 동일한 이름의 클래스가 없으면 소용이 없게된다.
그렇다면 어떤 상황에서 사용하면 좋을지에 대해서 생각해보니
css 문법안에서 정의하고 그 정의한 내용을 css 문법 안에서 사용할 수 있는 경우에
사용하면 유용할 것이라 생각했다.
대표적으로 animation 속성이 있다.
animation은 특정 name을 정의하고
그 name값에 해당하는 내용을 keyframes로 애니메이션 효과를 적용하기 때문에
css 문법 내에 정의하는 animation-name과 keyframes를 unique-id()로 사용할 수 있겠다.
이때, 주의해야할 점은 unique-id()를 사용해서 임의의 변수를 만들어
그 변수를 통해 animation-name과 keyframes 값을 적용시켜야 할 것이다.
/* SCSS */
.box{
$name: unique-id();
animation-name: $name;
animation-duration: 0.5s;
animation-iteration-count: infinite;
@keyframes #{$name} {
from { transform:scale(1.5); }
to { transform:scale(1); }
}
}
/* CSS Compiled */
.box {
animation-name: u4a1h1g;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
@keyframes u4a1h1g {
from {
transform: scale(1.5);
}
to {
transform: scale(1);
}
}위의 예시와 같이 $name이라는 변수에 unique-id()를 담고
해당 $name 변수를 animation-name과 @keyframes 의 이름 값을 일치시켜 준다.
3. unique-id() 사용시 주의사항
위의 예제들과 같이 사용하게 되면 특별한 문제는 없겠지만
2번에서 설명한 것 처럼 하나의 $name과 같은 변수에 unique-id()를 담아서 사용하는 것이 아니라
각각 unique-id()를 적용하면 내가 원하는 값을 받아올 수 없을 것이다.
/* SCSS */
.box{
animation-name: unique-id();
animation-duration: 0.5s;
animation-iteration-count: infinite;
@keyframes #{unique-id()} {
from { transform:scale(1.5); }
to { transform:scale(1); }
}
}
/* CSS Compiled */
.box {
animation-name: u4a1h6k;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
@keyframes u4a1h6l {
from {
transform: scale(1.5);
}
to {
transform: scale(1);
}
}위의 소스를 보면 확인할 수 있다.
unique-id()를 animation-name, @keyframes에 각각 적용을 하게 되면
위와 같이 비슷한듯 다른 unique-id값이 출력이 되기 때문에
애니메이션 효과 자체를 구현할 수 없게된다.
참고
sass-lang.com/documentation/interpolation
'Frontend > Sass (SCSS)' 카테고리의 다른 글
| [Sass 특징] placeholder 선택자 (%), @extend (0) | 2021.04.15 |
|---|---|
| [Sass 특징] @for 반복문 (0) | 2021.04.02 |
| [Sass 특징] Interpolation (보간법, #{}) (2) | 2021.04.01 |
| [Sass 특징] Parent Selector (부모 선택자, &) (0) | 2021.03.30 |
| [Sass 특징] @mixin, content block (@content) (0) | 2021.03.29 |
