Hi,
Forgive me if this has been answered before, but I haven't been able to find it.
What would be the reasons to chose LESS over SASS or vice-versa when developing with Kendo UI for jQuery?
I am rather new at this, so the only obvious reason to chose LESS that I have found is that it has more existing themes (currently 16) than SASS (4). This should make it easier to find a LESS theme that matches your requirements and modify for final touches.
What other differences might there be? (In terms of using it with Kendo UI for jQuery, I am not talking about a comparison LESS vs SASS in general)
Thanks,
Fredrik
1 Answer, 1 is accepted
Hi Frederik,
The preferred choice would be to use the newer Sass-based themes and the reasons are:
- Each theme is represented by a single CSS file that combines the layout and the themes of the components (vs 2 stylesheets needed for Less-based themes).
- Easy to customize and include only the modules that you need.
- Easy to create new theme variants (swatches) through the Sass ThemeBuilder application.
In terms of themes variations - we have updated the Sass-based themes in the latest release and included a lot of new predefined theme swatches that you can test in the demos through the "Change Theme" dropdown:
The swatches are theme variants that are based on the respective main themes (Default, Bootstrap, Material and Classic). You can use one of the available predefined swatches or create a new one based on the desired theme by following the guidelines in the documentation.
With the latest release, we also introduced the Classic Sass theme which is a much improved SCSS-based variant of the Less default theme. With this theme, you can now leverage all the improvements and enhancements from the Sass themes, while also achieving similar look and feel to the less themes. There are currently the Dark, Opal and Silver swatches available for Classic that you can try in the demos.
In terms of the usage - the Sass-based themes have different architecture that allows for great customization options (variables, component base metrics, typography, creating swatches, etc.) which are not available or hard to achieve with the Less-based themes. This combined with the ability to create different swatches provides greater development flexibility.
Regards,
Dimitar
Progress Telerik
Rank 1
Great, thanks a lot for you answer!
I have successfully (that was easy!) switched to using SASS, by simply including
kendo.default-v2.min.css
instead of
kendo.common.min.css
kendo.default.min.css
Now, I am trying to figure ot how to apply one of the predefined swatches. I can't find anything in the documentation, so I tried to figure out what the page https://demos.telerik.com/kendo-ui/grid/index does. Unfortunately, I haven't been able to find out how it changes the swatches. As a matter of fact, it looks like it still includes the LESS css-files. Here's what it looks like when I use (SASS) Default/Nordic:
They lack the v2-prefix, so they are LESS-based? Or are these files actually SASS-based? If so, how can I tell which are SASS and which are LESS?
- Default theme: Main, Main Dark, Nordic, Purple, Turquoise.
- Bootstrap theme: Main, Main Dark, Nordic, Urban, Vintage.
- Material theme: Main, Arctic, Fuscia, Lime Dark, Main Dark.
- Classic theme: Main, Opal, Silver.
The base themes are default-main/default-v2, bootstrap-main/bootstrap-v4,
material-main/material-v2. With the latest release we standardized the names so that the base theme is called main. However, we keep a version with the old name also for compatibility purposes. You can also review the theme chooser in the demos that allows you to switch between the less and sass-based themes.
Basically, the kendo.default-nordic swatch can be used in the application by referencing it in the application layout. You need to reference only this stylesheet (no need to reference the default-main.css).