Forum Discussion

snaffle's avatar
snaffle
Expert
7 years ago

Responsive variables - no suppor for REM or EM values

Working with responsive skins at the moment and we seen unable to use "rem" or "em" values in _variables.scss where we get the following error message:

 

skin didn't compile because there is a sass compilation error: problem loading skin: selectability,reason: Sass compilation for template 'selectability' failed: selectability/sass/_variables.scss:462: cannot add or subtract numbers with incompatible units

 

Is this a bug or has it been deliberately done this way for some reason.

 

No problem with adding them to _style.scss but it sure would be useful to be able to set them as variables.

8 Replies

Sort By
  • VikasB's avatar
    VikasB
    Boss
    7 years ago

    snaffle

     

    You can use these values in the variable.scss file also.  But I assume there is the syntax error. Seems you are using a hyphen(-) between two keywords without quotes which will not be possible because of that will treated as a minus(-) symbol. Can you share those lines? 

  • snaffle's avatar
    snaffle
    Expert
    7 years ago

    Hi VikasB,

     

    This is just the default variables.scss file - we haven't added anything, just changed existing values.

     

    Line 462 is where we are trying enter the rem's. By default it's as follows:

     

    $padding-xl-vertical:         40px;

     

    If that's the value it saves, but if I change it to:

     

    $padding-xl-vertical:         2rem;

     

    It won't compile in Studio and we get the error.

     

    Thanks

     

    Nathan

     

  • VikasB's avatar
    VikasB
    Boss
    7 years ago

    snaffle

    The same line works perfectly for my instance. It is also rendering an unexpected error message but the value is getting saved. 

    https://prnt.sc/iorfzr

    I refreshed the page but the value was saved there. 

    https://prnt.sc/iorh3r
    I would suggest you contact to support team. 

  • snaffle's avatar
    snaffle
    Expert
    7 years ago

    Thanks very much for taking the time to test it ... honestly hadn't occurred to me that it might actually be saving the value, but I've tested that myself with the same result.

     

    I'll lodge a ticket with support and see how we go.

     

    Thanks again

  • snaffle's avatar
    snaffle
    Expert
    7 years ago

    VikasB- an update on this.

     

    I tried entering a value of 2.5rem and it didn't save.

     

    It in fact reverted back to the 40px.

     

    I've lodged a ticket but I'd be interested to know if that saves for you on your setup?

  • VikasB's avatar
    VikasB
    Boss
    7 years ago

    snaffle

    Strange! Every time it renders the unexpected error. But yes, even after the error, it is also saving(https://prnt.sc/ios9je). It seems the instance-specific issue. Can you try this one if it saves

    $test: 2.5rem;

  • snaffle's avatar
    snaffle
    Expert
    7 years ago

    Yep that one worked fine... so it looks like it's a problem with the hyphens in the variable name being interpreted as numerical operators

     

    I've lodged a ticket with support and included a link to this thread so hopefully that helps them work it out... but yes seems to be something specific to our instance.

  • snaffle's avatar
    snaffle
    Expert
    7 years ago

    VikasBSomewhat unbelievably this was the response from support:

     

    "Here is a quick update from our L2 support team. Actually we don't support 'rem' unit so you have to use 'px' only in every CSS present in Lithium.
    However if you feel this should be used by Lithium in near future than I suggest that you create an Idea on our own Idea Exchange"

     

    So despite the fact we can save them in styles.scss and you can in variables.scss as well... they are saying it's not possible 🤨