How to replace LESS by Sass, UIkit by Semantic UI?

Hi,

I love LESS and still working good with it. But after read some articles such as Less vs Sass? It’s time to switch to Sass, I'm looking forward to work with Sass. So I'm just curious if there is an option to switch to use UIkit's Sass instead of UIkit's LESS.

Regarding Semantic UI, I just found it while getting issue with the component Autocomplete of UIkit. I have not used Semantic UI before, but follow the introduction for version 2.1 on Semantic UI official site, I think it's more elegant, modern and robust than UIkit (correct me if I'm wrong), at least the component Dropdown of Semantic UI is much more better than UIkit's. So, could we import SemanticUI 's core & components instead of UIkit's?

Thanks,

Nhan.

Hi Nhan and welcome to the Beans Community,

This is a good question which was asked to me in the past so I am going to give a detailed explanation which cover why Beans uses LESS and how you can use SASS (and the lost benefits by doing so).

Whether SASS is better than LESS is a forever debate just like PC over MAC or GULP over GRUNT. My opinion is that they are both good and I work with both in various projects on a daily basis. I do not believe LESS will ever die before SASS but I think CSS4 will become the comon ground and eventually replace both 🙂

While UIkit has a SASS version, it was initially built using LESS and primarily used when Beans launched.

One thing to keep in mind is that Beans doesn't require any nodejs workflow and does all the processing (LESS) work for you. Not only does it make it simple to code and more accessible to everybody, it allows you to load specific UIkit components on a per page basis, and even set LESS variables dynamically using PHP.

While Beans doesn't have SASS support (at this stage at least), you can totally add it yourself as such:

1. add beans_remove_action( 'beans_enqueue_uikit_components' ); in your child theme functions.php.
2. add your own version of UIkit SASS.
3. add your nodejs workflow to process UIkit and SASS.

It is important to know that it is then entirely up to you do your compiling and you will loose Beans ability to add UIkit component on the fly and all other Beans UIkit assets (JS and LESS) integration.

When it comes to using Semantic UI, the debate whether is better than UIkit is again an ongoing topic, and you could add many other UI framework in the equation 🙂 Backwards compatibility is extremely important and there is no way switching to another framework would work, it would break everybody's website. On top of that, Beans is a die hard UIkit lover and friend. That said we could think of making it possible to use another UI frameworks. We would apply the same process as above but we would also need to remove all UIkit HTML attributes and there isn't a possibility to do so at the moment. I have added it that to the feature requests and will think of a solution. Bear in mind that it would mean you would have more of a starter theme as there would be no classes and no assets and will have to add your own.

I hope that makes sense. It is undeniable that people (don't take it personally) are very stubborn with there own habits and often judge a product before even trying it. What I always suggest is to give it a gooooooood try and then decide what is good and not so good. Personally, I think that anybody with a deep understanding Beans and UIkit can build pretty much any website with no or very little plugins, whether it is a simple or an extremely complex website.

Thanks,

Hi Thierry,

Thank you so much for that very helpful answer!!! It enlightens me a lots.

LESS is OK for me, just a very little bit of sad that UIkit is the only choice, although it's also an amazing UI framework that is ongoing developed and no ones know which one will be the best in the future.

I love Beans, so I will try to love UIkit at the moment 😉

BTW, thanks for your great job! Beans is awesome! <3

Nhan.