Calc-function in LESS-files in UI for ASP.NET Core

This is a migrated thread and some comments may be shown as answers.

Calc-function in LESS-files

8 Answers 21 Views

This is a migrated thread and some comments may be shown as answers.

Jan asked on 26 Sep 2017, 08:53 AM

Hello,

we are using one custom LESS-file to configure our kendo theme and get our generated, bundled result CSS file. This LESS-file is referencing the specific theme files (in our case 'office365') inside the kendo styles-folder. Unfortunately there are rules with the 'calc' function, that are specially handled by the LESS compiler. Its not pushing the default statement to the CSS file, but a self-calculated one.

So this (kendo.common-office365.less - line 92):

calc(1.143em + (2*@button-padding-y) + 2px)

gets converted in the result CSS to this:

calc(4.001em)

And thats a wrong value, that shows me oversized buttons in the UI. To prevent this behaviour you should use the rule like this:

~'calc(1.143em + (2*@{button-padding-y}) + 2px)'

which gets the following correct result in the CSS file:

calc(1.143em + (2*.429em) + 2px)

8 Answers, 1 is accepted

answered on 14 Nov 2018, 10:58 AM

The next bit is probably going bore everyone, but it explains why there are differences in our themes. At the end I will answer the question, but we need the following to establish context.

(A quick note about sass and less: both are preprocessors for css meaning they compile down to pure css. sass is a bit older; both were originally written on ruby; less was moved to javascript; sass kinda stayed in the ruby until libsass which allowed various other implementations, including node-sass)

Initially, themes for kendo were built with less, so they could be compiled in the browser. For the time, at that early stage it meant you could ship everything with a single js file, albeit not a small one. However, as kendo continued to be developed, it was no longer viable to compile the styles in the browser, so we compiled them build time and shipped the compiled css.

That part hasn't changed at all and it is important to know that the infrastructure around kendo themes is based on less.

When we started implementing the sass based themes, we had an issue: how to compile the themes. Like I just stated, our infrastructure was based on less. Adding another compiler would have increased the complexity and introduce a fork in our build process. Instead, since the sass themes are npm modules, we depend on the sass themes, get the dist file, rename it to less and then it's "compiled" with the rest of the less themes.

Which brings me to the question: why there is no escaped calc in default-v2, bootstrap-v4 and material-v2? The answer is quite simple: those themes are already compiled down to css and any optimizations that might have been made are already there, courtesy of postcss and plugins. Which is unlike the less themes which need to be compiled and when we need to calculate something, say add padding and border-width, we need to escape those variables for the calc to work correctly.

Regards,
Ivan Zhekov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.