Version: 2022.3
언어: 한국어
USS 커스텀 프로퍼티(변수)
USS 빌트인 변수 소개

USS 변수 생성

USS 변수를 생성하여 다른 USS 프로퍼티에서 사용할 수 있습니다.USS 변수를 업데이트하면 해당 변수를 사용하는 모든 USS 프로퍼티가 업데이트됩니다.USS 변수의 기본값을 지정할 수도 있습니다.

USS 변수 생성 및 사용

USS 변수를 생성하려면 해당 이름 앞에 더블하이픈(--)을 붙이십시오.

--color-1: red;

다른 USS 규칙에서 USS 변수 값을 사용하려면 var()함수를 사용하여 호출하십시오.

var(--color-1);

변수를 업데이트하면 해당 변수를 사용하는 모든 USS 프로퍼티가 업데이트됩니다.

예를 들어 다음 USS 스니핏은 두 개의 컬러 변수를 선언하는 하나의 스타일 규칙과 이러한 변수를 사용하는 두 개의 스타일 규칙을 정의합니다.

:root {
  --color-1: blue;
  --color-2: yellow;
}

.paragraph-regular {
  color: var(--color-1);
  background: var(--color-2);
  padding: 2px;
  }

.paragraph-reverse {
  color: var(--color-2);
  background: var(--color-1);
  padding: 2px;
  }

컬러 구성표를 업데이트하려면 네 가지 컬러 값 대신 두 가지 변수 값을 변경하면 됩니다.

변수를 사용하면 여러 규칙(때로는 다른 스타일시트에 있음)이 동일한 값을 사용하는 복잡한 UI의 스타일을 보다 쉽게 관리할 수 ​​있습니다.

USS 변수의 기본값 지정

var() 함수는 선택적 기본값을 허용합니다. UI 시스템은 변수를 확인할 수 없을 때 기본값을 사용합니다. 스타일시트에서 변수를 제거했지만, 해당 레퍼런스를 제거하는 것을 잊은 경우를 예로 들 수 있습니다.

변수에 대한 기본값을 지정하려면 변수 값 뒤에 쉼표(,)로 구분하여 추가하십시오.

다음 USS 스니핏은 --color-1 변수를 호출합니다.UI 시스템이 변수를 확인하지 못하면 빨간색(#FF0000)에 16진수 값을 사용합니다.

var(--color-1, #FF0000);

CSS 변수와의 차이점

변수는 CSS에서와 마찬가지로 USS에서도 대부분 동일한 방식으로 작동합니다.CSS 변수에 대한 자세한 내용은 MDN 문서를 참조하십시오.하지만 USS는 CSS의 일부 기능을 지원하지 않습니다.

  • USS는 아래와 같이 다른 함수 내부의 var() 함수를 지원하지 않습니다.
  background-color: rgb(var(--red), 0, 0);
  • USS는 변수에 대한 수학적 연산을 지원하지 않습니다.

추가 리소스

USS 커스텀 프로퍼티(변수)
USS 빌트인 변수 소개