Create USS variables

You can create a USS variable and use it in other USS properties. When you update a USS variable, all of the USS properties that use that variable update. You can also specify default values for USS variables.

Create and use USS variables

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

--color-1: red;

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

var(--color-1);

When you update a variable, it updates all the USS properties that use it.

예를 들어 다음 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;
  }

To update the color scheme, you can change the two variable values instead of the four color values.

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

Specify default values for USS variables

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

To specify a default value for a variable, add it after the variable value, separated by a comma ,.

The following USS snippet calls the --color-1 variable. If the UI system can’t resolve the variable, it uses the hex value for red (#FF0000).

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

Differences from CSS variables

Variables work mostly the same way in USS as they do in CSS. For detailed information about CSS variables, see the MDN documentation. However, USS doesn’t support the var() function inside of other functions, as in the property declaration below:

background-color: rgb(var(--red), 0, 0);

추가 리소스

• Introduction to USS built-in variables
• USS built-in variable reference