Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Question Can't set custom properties (variables) in USS [Unity 2021.2.2f1]

Discussion in 'UI Toolkit' started by v-strelchenko, Nov 17, 2021.

  1. v-strelchenko

    v-strelchenko

    Joined:
    Aug 2, 2019
    Posts:
    13
    Hi all! According to documentation, it seems like the USS variables are supported, but when I try to use it in my USS files, in Rider I get "unknown pseudo selector 'root'" and "unknown function 'var'":
    USS Document Errors.png
    [Screenshot by Lightshot (prnt.sc)]

    And then the UI Document looks off:
    UI Builder View.png
    [Screenshot by Lightshot (prnt.sc)]

    The .button-background-color class, underlined in red, should give the button a green background, instead it is white. Which leads me to believe that it is not just Rider complaining. Am I doing something wrong?

    The documentation I'm referring to: Unity - Manual: USS custom properties (variables) (unity3d.com)
     
  2. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    515
    Rider has no knowledge of the uss syntax, so I am not surprised if it is not able to understand 100% of the features.

    That being said, variables should work. :) One thing to know is that the root selector correspond to the object on which the stylesheet is added, not necessary the topmost object of the hierarchy. From there the variable should pass through to the children unless you apply something else down in the hierarchy. You can use the UI Toolkit debugger to see what variable are applied to an object.

    In the screenshot, you can see the variables being defined on the object: upload_2021-11-17_14-3-35.png

    1. If you crawl up the hierarchy in the debugger, can you see the variable set on one of the parent.
    2. On the object itself, you should see the selector being applied and that the background-color property should match with your variable.
    3. Can you test that if you set the background color to a literal value instead of a variable, it works? Maybe the problem lies with the selector and not the variable.
     
  3. v-strelchenko

    v-strelchenko

    Joined:
    Aug 2, 2019
    Posts:
    13
    @SimonDufour thanks for the reply! I actually didn't know that the USS files are applied to a certain node. I thought, if I add them to the UI Builder, they are valid for the whole UI Document. Do I have to pull the USS onto the root node to specify that it should apply there?

    Regarding your 3rd point, I did start with a literal, and only then tried to upgrade the solution to use variables. So yeah, it worked with literals.
     
  4. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    515
    You need to apply the stylesheet to the common ancestor to wherever the style should be applied. One special case is the "root" selector that apply to the element on which the stylesheet is applied, so for this one it matters a lot. For all other class or name selector, it should not matter which parent have the stylesheet. If you are making a component, it would still work on self.

    Let me know if this answer your question, I feel like you are asking something specific, yet my answer is really meta.
     
  5. v-strelchenko

    v-strelchenko

    Joined:
    Aug 2, 2019
    Posts:
    13
    Yeah, I think I'm confused as to how you would specify, where the stylesheet is applied to, because the usual workflow is just adding the Stylesheet in the UI Builder, which makes it valid for the whole UI Document. Tbh, it's not a big issue so far, I've just went back to defining a class for the color, because it seems like I was doing stuff correctly and it's just the feature is a bit raw a the moment.