Unity Style Sheets allow you to stylize your UI Elements, be it in the Editor or in your Game.
They are part of the UI Toolkit system Unity is currently developing.
In this video we're going to learn about the basics of style sheets, learning about stylizing your UI with them or with the Style variable as well as the different ways you can add a style to your Visual Elements.
This video does not go into detail about advanced topics like flexbox, but at a maximum gives you some basic properties.
________________________________________________________
Timestamps:
00:00 Introduction
00:26 What are Style Sheets
00:47 Topics
01:41 Getting the Starting Files
02:16 Style Variable
03:54 How do Style Sheets work?
04:40 Existing Selector Types
05:00 C# Type Selector
05:32 Setting the C# Type Selector Properties
06:29 Loading the Style Sheet
07:22 Adding the Style Sheet to the Editor Window
08:18 Useful Warnings on Properties and Values Mistakes
08:44 Class Selector
09:41 Methodology used by Unity
10:00 Setting the Class Selector Properties
11:05 Telling Unity this is a Class Selector
11:32 Adding the Class to the Buttons
12:21 Pseudo-Class Selector
12:42 Updating the Hover Pseudo-Class
13:16 Updating the Active Pseudo-Class
13:58 Creating the Horizontal Container using a Class Selector and Flexbox Properties
16:03 Get Classes List of a Visual Element
16:28 Name Selector
17:22 Telling Unity this is a Name Selector
17:32 Setting the Name Selector Properties
17:37 Adding the Name to the Color Picker
18:27 Adding Margins to other Selectors
18:41 Wildcard Selector
18:58 Setting the Wildcard Selector Properties
20:10 Specificity
20:56 Style Sheet Variables
21:14 Creating Style Sheet Variables
21:27 Making the Variables Global
22:08 Creating the Yellow Color Variable
22:42 Creating the Margin 8 Variable
23:01 Variables in their own Style Sheet File
23:32 Variables Default Value
23:49 Summary
24:55 Outro
________________________________________________________
Useful links:
Starting Code: [ Ссылка ]
USS Supported Properties: [ Ссылка ]
CSS Color Names: [ Ссылка ]
USS Selectors (Including the Specificity): [ Ссылка ]
Unity Writing StyleSheets (Including the Methodology): [ Ссылка ]
BEM: [ Ссылка ]
Yoga Layout Engine Github: [ Ссылка ]
Yoga Layout Engine Page: [ Ссылка ]
Overview of USS: [ Ссылка ]
Learn about CSS: [ Ссылка ]
Learn about CSS: [ Ссылка ]
USS Pseudo-Classes: [ Ссылка ]
USS Variables (Including root pseudo-class for Inspector UI): [ Ссылка ]
Resources Folder Tutorial: [ Ссылка ]
UI Elements Tutorial: [ Ссылка ]
________________________________________________________
● Subscribe: [ Ссылка ]
● Follow me on Twitter: [ Ссылка ]
________________________________________________________
Unity Style Sheets - The Basics
Теги
Unity Style SheetsUI ElementsStyle SheetsUI ToolkitUnity UI ToolkitUnity UI ElementsUnity CSSUnity USSUSSUnity Style Sheets UI ToolkitUnity Style Sheets UI ElementsUnity StyleSheetsUnity TutorialUnity UIElementsGame DevTutorialLearnBasicsBasics of Style SheetsUnityUnity 3DUnity 2DUnity Editor WindowUnity EditorUnity UIUnity Styles