search

sasstools / sass-lint

Pure Node.js Sass linting
MIT License
1.77k stars 530 forks source link

Rule: Use of calc without interpolation #1005

Open gyoshev opened 7 years ago

gyoshev commented 7 years ago

When using variables in calc() values, they are not evaluated in the SASS output. For example,

width: calc( $padding-y - $icon-size );

... does not get converted, so it outputs invalid CSS.

The current suggestion in SASS is to interpolate the value, like this:

width: calc( #{$padding-y} - #{$icon-size} );

It would be great if the linter warns against use of calc( $var ) usage without interpolation.

gyoshev commented 7 years ago

@DanPurdy do you find this request sensible? I am willing to contribute a patch if this is approved.

shushugah commented 7 years ago

+1 for linter warning for lack of interpolation. Using interpolation makes sense to me, but was confusing nonetheless.

DanPurdy commented 7 years ago

So sorry for not replying sooner, somehow missed this issue when scouring through the backlogs while i was away. I think it's a very sensible rule to have to be honest. I'll mark it down, it should be easy enough to implement, happy to see PR's for this as always too. 👍

DFlakeMWC commented 6 years ago

I am using Drupal v. 7.60 Module: Sassy core SASS+SCSS compiler (sassy)

Problem: I've used the current selection with Sassy Module and it does not work. $var-percent:100%; $var-pixel: 45px; width: calc( #{$var-percent} - #{$var-pixel} );

Result: I expected the interpolation to turn the values into strings in the css Error: Incompatible units: 'px' and '%'. Is there a new work-around for this, or a fix in the near future so I can use calc() in Scss to fake media queries.