[Sass 특징] unique-id()

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