I wanted to share an idea I have had for a long time: bringing a language for styling elements on the web to Roblox.
Why Sass?
Sass is a stylesheet language extension of CSS with two different “flavors”, Indented and Scss(or “Sassy CSS”)
Indented Sass, the original format of Sass:
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
Sassy CSS, the popular format of Sass, for its easy implementation:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Sass offers many features, regarding styling of an element that I feel could bring very cool features to game UIs. Further expansion of UIGrid, UIList, and UIPadding; Frameworks to layer on top of the vanilla RoSass.
This is very new, but if you would like to contribute to my efforts in pushing and expanding our current UI features forward, you can check it out on Github!
A stylesheet language is used to make the web pretty! From the use of fonts, transitions, buttons, colors, text formatting and a TON more and more everyday! So, yes it is.
It’s an extension, by way of bringing additional features to CSS such as removing the need for braces and semicolons (Indented version) and uses indention over braces to declutter and make for easier reading.
I encourage you to look at the potential additions this could add to our environment. I have linked several sources that commonly accompany Sass development. It is about bringing more features to Roblox UI and expanding upon the ones we currently have making them even more useful!
My goal is to open the door to Roblox with this, having done the work, and they’d be more likely to add support for this feature expansion.
I don’t see the usage for this, it seems like a whole lot more work when everything can already be done at Roblox w/o CSS. Good luck on your future projects though, and hopefully this will work out for you, but I just don’t see it’s use cases.
I am not proposing we switch to CSS, I am just seeking support for making these features possible for Roblox (i.e. turning these into Lua compatible features like what they did with Roact, this isn’t that different).
What your missing is that Roblox has its own way of creating user interfaces. CSS is not something you can drag on screens and adjust it with ease. By turning what we have already into something like CSS, it will only make it harder.
Why didn’t Roact come in the form of interfaces? It’s not an interface I am adapting, it’s already code related features that are engineered to build interfaces.
Alright, I understand a little bit more now. It would be great to have some of these features, and I do think Roblox will be adding these some time in the future. But right now I don’t see the point, because UI Designers use other software to make User Interfaces. And the software is much more powerful than any CSS related stuff.
What png or jpeg images? Why not have features that could be useful to actually make shapes without the need for workarounds?
Listen, I am not saying I am right in what I am doing, but I do know that if you are willing to do something no one else wants to do or can do (today, tomorrow or the next), then they’ll be grateful for that; because they didn’t have to do it. Roblox is pretty tied up.
It’s about having the features to make crisp buttons animations, and more; things we’ve enjoyed on the web now going on 40 years!
I hear so much about features people want and that the staff tells us one thing, but have not yet delivered. I want to build a foundation where most of their work and some more is done for them.
Would it be possible to direct me towards a resource that explains about why (but not how) to use Sass or css instead of the traditional Roblox ui approach–I’m not sure what it’s called? Because I spend so much time on UI in Roblox and I really wish there were a better way, and I’ve looked at Roact but for some reason it seems to just make ui even more awful (or maybe at least when the ui is heavily animated?), but your project RoSass seems really cool and I am hoping it will solve all of my problems :3
The Sass website (linked in the OP) tells you further information. But, there are web development tutorials showing it in action Brad Hussey is a good channel to start with Sass.
Just pushed a commit a few minutes ago! Working on clarifying documentation next. Vendor Prefixes are going to open the door to non-standardized support for frameworks and more!