ritwickdey / vscode-live-sass-compiler

Compile Sass or Scss file to CSS at realtime with live browser reload feature.
https://ritwickdey.github.io/vscode-live-sass-compiler/
MIT License
657 stars 169 forks source link

Compilation Error after updating to 2.1.0 #76

Closed finkerl13 closed 6 years ago

finkerl13 commented 6 years ago

Since 2.1.0 I get an Error compiling my mixin

`//--------------- Fluid Typography -----------------// @function strip-unit($value) { @return $value / ($value * 0 + 1); }

@mixin fluid-type($property , $min-font-size, $max-font-size) { $min-vw: 320px; $max-vw: 1920px; $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size);

@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
  & {
    #{$property}: $min-font-size;
    @media screen and (min-width: $min-vw) {
        #{$property}: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    }
    @media screen and (min-width: $max-vw) {
        #{$property}: $max-font-size;
    }
  }
} 

}`


Compilation Error Error: 2 isn't a valid CSS value. on line 20 of sass/y:\PRODUCING\MASTER\standard\css\src_mixins.scss

@return $value / ($value * 0 + 1);

----------^

JordanSayner commented 6 years ago

I also get an error "isn't a valid CSS Value". My code is

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

and I'm calling my mixin

@include responsive-font(5vw, 36px, 60px);

the error for me is this line

$min-breakpoint: $min / $responsive-unitless * 100;

ritwickdey commented 6 years ago

Hi @JordanSayner, are you not missing }? Or just typo on github? anyway, you're code is fine. No issue!

ritwickdey commented 6 years ago

Hi @finkerl13, can you please tell me how your using the mixin?

finkerl13 commented 6 years ago

Hi ritwickdey, Here's an example, that worked before the update.

body { @include fluid-type (font-size, 14px, 26px); }

JordanSayner commented 6 years ago

@ritwickdey I didnt copy my whole mixin as the code errors on that last line so the rest of the code isnt being hit.

ritwickdey commented 6 years ago

Yep! Thank you so much for the report!

Actually, this extension dependents on sass.js. I think, their latest version has some issue. From v2.0.0 I updated the library to latest version. & you're all started facing the issue.

Okay. I'm downgrading the version to 1 step back. It should work.

(Honestly, I don't know scss that much, I know simple scss. I just copy paste your codes. After downgrading, it's working. :smile: )

I'm publishing (within 2hours) a new version with the fix. I'll update you once the version is available on vscode marketplace.

ritwickdey commented 6 years ago

The new version (v2.2.0) is now available to install. Please install the extension & let me know if it fixed for you or not! (I'm closing the issue for now.)

Anyway, thank you to all for the great support. If you've time && you like the extension, please leave a review in the vscode marketplace.

ritwickdey commented 6 years ago

Not Actually fixed, my bad luck. #77

ritwickdey commented 6 years ago

Fixed from v2.2.1 (confirmed)

finkerl13 commented 6 years ago

Thanks a lot!

JordanSayner commented 6 years ago

Working for me now :-) Thank you.