Less to Sass Theme Migration
R1 2023 is the last official release of Kendo jQuery, where Less Themes are supported and shipped with the product.
In this article you will learn how to migrate your project from a Less theme to its Sass counterpart. To find out if you are using a Less theme, check the Less section of the How Do I Know If I Am Using a Less Theme section.
For additional information about the Sass themes, visit the Sass-Based Themes article.
Why Do I Need to Migrate to a Sass Theme?
The Less-based themes support only the default values of the new Components Styling Options.
The Less-based themes will receive the new styling options like the Sass themes. However, in 2023 the Less themes will be officially deprecated. Customers who continue to use Less themes after their deprecation will not be able to take advantage of the latest visual updates, features, and bug fixes. Also, the 2023 and later Kendo UI versions will be incompatible with the Less themes and you won't be able to upgrade the product version either.
The reason behind the deprecation of the Less-based themes is that they take a tremendous amount of time and resources to be kept updated.
The SASS-based themes provide unique swatches that are based on the main theme and can be updated at once. This allows us to change the design and color scheme of our components in a more timely manner which in turn leaves more time for new themes and swatches to be developed.
With the Less-based themes, each individual theme has its own code base. Any time a component is updated or introduced, you must recreate each Less theme to ensure that the new addition is rendered without problems.
Ultimately, the goal behind these changes is to allow the team to focus on updating existing themes and creating new themes that have been requested by our clients.
How Do I Know If I Am Using a Less Theme?
The easiest way to know if you are using the Less themes is if you are including multiple CSS files, specifically files that follow the following naming pattern:
kendo.common.min.csskendo.[theme-name].min.csskendo.mobile.min.csskendo.rtl.min.css
If you aren’t using this combination and instead use a single CSS file like kendo.default.min.css, then you are using the Sass themes and you can skip the following section.
How Do I Migrate to a Sass Theme?
The migration to a Sass theme is a straightforward process:
-
Remove the old Less theme references, for example:
<!-- The following styles are required for the Less Classic theme. --> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.common.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default.mobile.min.css" /> -
Add a reference to the Sass theme that you want to use, for example:
<!-- The following styles are required for the Sass Classic theme. --> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css" />
With the new rendering of the components, some CSS classes will be deleted. If you use any of those classes to customize a component, you will have to update their references. Otherwise, the customizations will be lost.
How Do I Know Which Sass Theme Corresponds to My Current Less Theme?
The Less themes have Sass swatch counterparts.
The following table contains the name of the Less theme and its Sass counterpart:
The Bootstrap and Material Less themes will not have their own Sass swatches. Instead, use the dedicated Bootstrap and Material Sass themes.
These are alternative variants to the LESS themes and they do not provide a one-to-one conversion, but a similar and improved look-and-feel.
The following example demonstrates how to add a theme to your project. Note that you have to add the snippet to the head element of the page.
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/classic/classic-main.css" />
Which Styling Options Are Available for the Less Themes?
The Less-based themes support only the default values of the new Components Styling Options. To utilize the full potential of the new rendering of the components, you must use a Sass-based theme or a swatch.