커스텀 USS 스타일 정의

USS 스타일을 정의하는 첫 번째 단계는 새 스타일시트를 만드는 것입니다. 스타일시트를 사용하여 에디터의 시각적 형상을 확장할 수 있습니다. 이 작업은 StyleSheets/Extensions 폴더 계층 구조의 Editor 폴더에 common.uss라는 파일을 추가하여 수행할 수 있습니다. 예를 들어 다음은 유효한 위치입니다.

Assets/Editor/Stylesheets/Extensions/common.uss
Assets/Editor/MyFolder/Stylesheets/Extensions/common.uss
Assets/Editor/MyFolder1/MyFolder2/Stylesheets/Extensions/common.uss

USS 파일(Unity 스타일시트용)은 CSS와 유사한 구문을 사용하여 새로운 스타일을 설명합니다. 다음은 그에 대한 예입니다.

myStyle
{
    width:18px;
    height:18px;
    background-image: resource("Assets/Editor/icon.png");
}

이 스타일에서는 크기 프로퍼티와 함께 커스텀 아이콘을 사용하도록 지정했습니다. 또한 USS 스타일은 CSS의 유사 클래스처럼 동작하는 유사 상태도 지원합니다. 타임라인 마커는 다음의 유사 상태를 지원합니다.

• 축소됨: .myStyle
• 일반: .myStyle:checked
• 선택됨: .myStyle:hover:focus:checked

또한 USS 스타일시트는 Unity의 밝은 테마와 어두운 테마도 지원합니다. dark.uss 및 light.uss라는 파일의 스타일은 common.uss의 스타일을 오버라이드하는 데 사용됩니다. 예를 들면 다음과 같습니다.

• common.uss

myStyle
{
   width:18px;
   height:18px;
   color: rgb(125, 125, 125);
}

• dark.uss

myStyle
{
   color: rgb(0, 0, 0);
   background-image: resource("icon_dark.png");
}

• light.uss

myStyle
{
   color: rgb(255, 255, 255);
   background-image: resource("icon_light.png");
}

어두운 테마에서 myStyle은 다음으로 해결됩니다.

myStyle
{
   width:18px;
   height:18px;
   color: rgb(0, 0, 0);
   background-image: resource("icon_dark.png");
}

밝은 테마에서는 다음으로 해결됩니다.

myStyle
{
   width:18px;
   height:18px;
   color: rgb(255, 255, 255);
   background-image: resource("icon_light.png");
}