Calc-function in LESS-files

9 posts, 0 answers
  1. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 26 Sep 2017 Link to this post

    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)

  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 29 Sep 2017 Link to this post

    Hi Jan,

    We have inspected the element and it works properly on our side. Could you please specify what is the theme and if there is some our online demo where the issue is reproduced?

    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 29 Sep 2017 Link to this post

    We are using Visual Studio 2017 + LESS Compiler. Compiling the .less returns the wrong result as written in the first post. You will find more about this topic when googling "less calc problem".
  4. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 29 Sep 2017 Link to this post

    Hello Jan,

    Thank you for pointing the issue. We have updated your Telerik points because of reporting a bug. We have logged it for fixing here, so you can follow the issue.

    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 09 Nov 2018 Link to this post

    2018.3.1017 - default-v2 theme

     

    Still this problem. Can this be fixed too please?

  6. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    654 posts

    Posted 13 Nov 2018 Link to this post

    Jan,

    could you point us to the location where the issue is? We've recently updated our theme build process and I think the issue might be solved, but I need to compare the output first.

    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.
  7. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 13 Nov 2018 Link to this post

    When I open the "kendo-ui/src/styles/web/kendo.default-v2.less" (Kendo UI v2018.3.1017) and search for "calc", I just find calc(...) instead of escaped ~'calc(...)'.
  8. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    654 posts

    Posted 14 Nov 2018 Link to this post

    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.
  9. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 14 Nov 2018 Link to this post

    Thank you for the clarification. Well after thinking a bit about the problem, I don't understand why I am using the .less file instead of the .css directly, because I add it to a bundle anyway. So I will bypass the less file now and my problem should be fixed.
Back to Top