Scripts for using Sass and Slim for UIElements layouts

Hi all,

I just wanted to share how I've gotten transpiling to work from Slim to UXML and Sass to USS.

In the web dev world it's pretty common to write layouts in less bloated template languages which are then converted into the messier markup needed for the browser.

I'm working on a big project using UIElements and my XML was getting pretty ugly, and my stylesheets were getting long. So I just wrote a couple of scripts that call the Slim and Sass compilers from the command line when these filetypes are changed within a Unity project:

https://github.com/eidetic-av/UIElements-Sass
https://github.com/eidetic-av/UIElements-Slim

Here is an example of Sass:

Code (csharp):

1. $sizes: 40px, 50px, 80px
2.  
3. @each $size in $sizes
4.   .icon-#{$size}
5.    height: $size
6.    width: $size
7.  
8.    Label
9.      font-size: $size / 2

Compared to the generated USS:

Code (csharp):

1. .icon-40px {
2.   height: 40px;
3.   width: 40px;
4. }
5. .icon-40px Label {
6.   font-size: 20px;
7. }
8.  
9. .icon-50px {
10.   height: 50px;
11.   width: 50px;
12. }
13. .icon-50px Label {
14.   font-size: 25px;
15. }
16.  
17. .icon-80px {
18.   height: 80px;
19.   width: 80px;
20. }
21. .icon-80px Label {
22.   font-size: 40px;
23. }

And here is an example of Slim:

Code (csharp):

1. UXML
2.     Foldout class='column'
3.         - ['elephant', 'zebra', 'lion', 'giraffe'].each do |animal|
4.             - elementName = 'row-' << animal
5.             Box name=elementName
6.                 - imagePath = 'Resources.Load(' << animal << 'Image)'
7.                 Image image=imagePath class='animal-image'
8.                 Label text=animal class='animal-label'
9.                 - buttonText = 'Choose the ' << animal
10.                 Button text=buttonText

Which produces the following UXML file:

Code (csharp):

1. <?xml version="1.0" encoding="utf-8"?>
2. <UXML xmlns:xsi="http:/www.w3.org/2001/XMLSchema-instance"
3.      xmlns="UnityEngine.UIElements"
4.      xsi:noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd"
5.      xsi:schemaLocation="UnityEngine.UIElements ../UIElementsSchema/UnityEngine.UIElements.xsd">
6.   <Foldout class="column">
7.    <Box name="row-elephant">
8.      <Image class="animal-image" image="Resources.Load(elephantImage)"></Image>
9.      <Label class="animal-label" text="elephant"></Label>
10.      <Button text="Choose the elephant"></Button>
11.    </Box>
12.    <Box name="row-zebra">
13.      <Image class="animal-image" image="Resources.Load(zebraImage)"></Image>
14.      <Label class="animal-label" text="zebra"></Label>
15.      <Button text="Choose the zebra"></Button>
16.    </Box>
17.    <Box name="row-lion">
18.      <Image class="animal-image" image="Resources.Load(lionImage)"></Image>
19.      <Label class="animal-label" text="lion"></Label>
20.      <Button text="Choose the lion"></Button>
21.    </Box>
22.    <Box name="row-giraffe">
23.      <Image class="animal-image" image="Resources.Load(giraffeImage)"></Image>
24.      <Label class="animal-label" text="giraffe"></Label>
25.      <Button text="Choose the giraffe"></Button>
26.    </Box>
27.   </Foldout>
28. </UXML>

These scripts are not tested other than on my own machine, and require the command line tools for Sass and/or Slim to be installed.

Even if these transpilers don't interest you, I think this is just an example of what a good choice it was for Unity to base UIElements on web development. The world is full of web devs and web tools and frameworks and information that makes it easy to dive in with. No more need to go learn a specific Unity C# API that you won't use for anything else...just Google CSS and flex-box and you can pretty much learn all you need... and just like I've done here, we can now leverage lots of web dev tools which have matured over 20 years.

 

Hi

let me just say this is amazing!

on what OS are you (I'm on ubuntu) and do you have to manually run the transplanting scripts for each file and reimport each file into unity or do you have it set up in a way where you can code sass and slim in the UI builder and just forget about everything else?

Oh for sass you didn't find a non proprietary lib, dammit that's the most interesting part!

 

Thanks!

Damn I didn't realise last year how dumb I was being including the non-free DLLs...

I just changed it so that the sass script runs whatever sass installation you've got available in the command line, like how the slim script works. Unfortunately this pops up a terminal window on every compile at the moment, but it's better than having the .

To answer your question, you don't have to manually run the scripts - they automatically run when unity detects a change in the project's assets folder (with OnPostprocessAllAssets).

But I actually wrote these little scripts not knowing about UIBuilder, just editing the stylesheet and markup in a code editor.

I just had a look and UIBuilder looks pretty cool. Maybe it will work with it? I'm not sure the UXML and USS Preview windows would auto-update. You won't be able to edit sass and slim in there though. It would be great if you could. I might have a look at it next time I'm building UIs in Unity. I guess UIElements has come a long way since I last looked at it.