Skip to content

Migrate Icons to New Sass if() syntax #552

Description

@zhpenkov

ProblemSass deprecated the 3-argument if($condition, $true, $false) function in favor of a new CSS-native syntax (requires sass ≥ 1.95.0):// Old (deprecated)
if($key == DEFAULT, var(--kendo-#{$css-var}), var(--kendo-#{$css-var}-#{$key}))

// New
if(sass($key == DEFAULT): var(--kendo-#{$css-var}); else: var(--kendo-#{$css-var}-#{$key}))
Kendo Themes packages still use the old syntax, generating deprecation warnings for customers on newer Sass versions.Customer ImpactUsers building with Sass ≥ 1.95.0 see deprecation warnings at build time originating from Kendo theme SCSS (e.g. kendo-theme-utils/_mixins.scss).Many build toolchains bundle a specific Sass version internally. The new syntax causes hard build errors on Sass < 1.95.0 — migrating might break customers whose toolchain pins an older Sass version and which they cannot override.

Angular version Bundled sass Clearance
20.0 – 20.3 (LTS, active until Nov 2026) 1.90.0 ❌ Would hard-error
21.0.0 – 21.0.6 1.93.2 ❌ Would hard-error
21.1.0+ 1.97.1
21.2.x 1.97.3
22.x (latest) 1.99.0

Other toolchains (Vite, webpack, Next.js, Nuxt): don't bundle sass — users install it themselves, so they can upgrade independently. Not a concern.Possible solutionsTrack ecosystem adoption of sass ≥ 1.95.0 across major build toolchains
Migrate all if() usages in theme SCSS to the new syntax
Add "sass": ">=1.95.0" as a peer dependency constraint when shipping

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions