Do css variables (Custom USS Properties) work yet?

They don't seem to work for me in 2019.3.0f5.

Code (csharp):

1. :root {
2.    --radius: 10;
3. }
4.  
5. .element {
6.     border-radius: var(--radius);
7. }

They are mentioned in the manual and in this post about 2019.3.0a10.

 

oooh I didn't know that was a thing. Even if they don't work yet I'm glad you posted about it.

 

They seem to be a thing, although I'm not sure how public the API is yet, and they don't appear to resemble CSS variables. Here's what I've managed to figure out by trawling some source code.

They allow you to pass data from your USS into C#, where you can process the data and apply changes to your VisualElement. All custom properties I've seen are specific to one VisualElement type. Some examples of custom properties I've found are:

• A color property used to set the colour of lines in a curve editor.
• An int property used to set the height of the items in a list view.
• A color property used to set the selection colour for a text field.
• An int property used to set the layer index for nodes on a graph view.

CustomStyleProperties are defined within classes. Here's an example of how the item height property is implemented in the ListView:

Code (CSharp):

1. internal static CustomStyleProperty<int> s_ItemHeightProperty = new CustomStyleProperty<int>("--unity-item-height");

The class then registers a callback for CustomStyleResolvedEvent within the constructor.

Code (CSharp):

1. RegisterCallback<CustomStyleResolvedEvent>(OnCustomStyleResolved);

Then you can access the property from the callback, and do whatever you want with it!

Code (CSharp):

1. private void OnCustomStyleResolved(CustomStyleResolvedEvent e)
2. {
3.     int height = 0;
4.     if (!m_ItemHeightIsInline && e.customStyle.TryGetValue(s_ItemHeightProperty, out height))
5.     itemHeight = height;
6. }

It looks like most of the API is available for use, although mostly undocumented, and probably prone to change. I couldn't see any way to get units out of the values from the few examples I glossed over.

 

I think my problem was using it in ':root'. It works if I use it in the main container, and add 'px' like you said. This is awesome!

So, basically just put the variable in the main container, and all the children can pick it up.

 

It's probably because I'm making an inspector Editor using CreateInspectorGUI and not doing it properly, or its not supported. I'm only doing it to test a PropertyDrawer for when inspectors ditch IMGUI. It looks like this:

Code (csharp):

1.  
2. [CustomEditor(typeof(Tester))]
3. public class TesterEditor : Editor
4. {
5.     public override VisualElement CreateInspectorGUI()
6.     {
7.         var container = new VisualElement();
8.         container.styleSheets.Add(Resources.Load<StyleSheet>("css"));
9.  
10.         return container;
11.     }
12. }

I can report a bug if it's supposed to work here.

 

Ok it's Case 1213652 - UIElements uss variables do not work in root selector.

 

so the :root selector is not the preferable way to do it?

if not, which way would you recommend? would a wildcard selector (*) work better?

 

I'm wondering about this as well, because for me variables are most useful if they're global. Preferably across multiple .uss files as well.

I think I've seen people do this from C#, but I really want a solution that works in USS as that's where they belong imo.

 

ah okay, good to know! I noticed it worked in editor windows, but knowing this for inspectors will be useful going forward. I'd recommend updating the docs to reflect this nuance