SASS how to ignore style in css file to be overwritten by sass

Viewed 49

I have a style in a sass file that is written like

.style{
  width: calc(100%);
}

However, for some reason the output to its corresponding css file is

.style{
  width: 100%;
}

And it removes the calc(), which is needed. I figure a solution to this would be for this to be put manually into the css file and have sass ignore it so it is not overwritten, but I am not sure as to how to ignore a style in sass

2 Answers

calc is a function into which you insert a calculation. According to your example you did not enter a calculation like calc(100% - 70%)

Which would give a width of 30%, but specified the value you want

I assume that your sass compiler removed the calc() for asset optimization because it is redondant in this context : calc(100%) === width: 100%
Does this also happens when you do a actual calculation like calc(100% - 30px) ?
If so, i'd advice you to take a look at your sass compiler configuration.

By the way, which tool are you using for compiling sass ? (Webpack ? parcel ? rollup ?...)

Related