New to Kendo UI for jQuery? Download free 30-day trial

Less to Sass Theme Migration

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 just 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 several unique swatches that are based on the main theme and can be updated at once. This enables the timely design and color scheme changes of the components 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.css
  • kendo.[theme-name].min.css
  • kendo.mobile.min.css
  • kendo.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 very straightforward process:

  1. 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" />
    
  2. 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/2022.2.621/styles/kendo.classic-main.min.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.

Classic Swatches

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.

Less Theme Sass Theme Status Sass Theme CDN
Default Classic - Main Available https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.classic-main.min.css
Blue Opal Classic - Opal Available https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.classic-opal.min.css
Silver Classic - Silver Available https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.classic-silver.min.css
Fiori TBD TBD N/A
Bootstrap 3 Bootstrap - Bootstrap 3 TBD N/A
Bootstrap 3 Dark Bootstrap - Bootstrap 3 Dark TBD N/A
Flat Bootstrap - Turquoise TBD N/A
Flat Dark Bootstrap - Turquoise Dark TBD N/A
High Contrast TBD TBD N/A
Metro TBD TBD N/A
Moonlight TBD TBD N/A
Nova Material - Nova Available https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.material-nova.min.css
Office 365 TBD TBD N/A
Uniform TBD TBD N/A

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/2022.2.621/styles/kendo.classic-main.min.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.

See More

In this article