manuelsch / sass-scss-converter Goto Github PK

A valid import module in sass, which does not use quotes, is converted without the quotes being added (but which are required in scss).

The semicolons are missing after @extend rule

Input SCSS:

@mixin centered($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

Output Sass:

@mixin centered($horizontal: true, $vertical: true)
  position: absolute
  @if ($horizontal and $vertical)
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)

    left: 50%
    transform: translate(-50%, 0)

    top: 50%
    transform: translate(0, -50%)

The output lacks some else-if-s.

Is it appropriate to do this?

+dark
	.card
		background: white

is converted into

+ dark {
    .card {
		background: white
    }
}

but should be

@include dark {
    .card {
		background: white
    }
}

This only happens on the top level.

Is there a way to run this locally via CLI? Would love to convert files in bulk.

Affects SASS to SCSS

SASS Input:

%placeholder
  color: red
.my-thing
  @extend %placeholder

Expected SCSS Output:

%placeholder {
  color: red;
}
.my-thing {
  @extend %placeholder;
}

Actual SCSS Output:

placeholder {
  color: red;
}
.my-thing {
  @extend placeholder;
}

Affects SCSS to SASS

SCSS Input:

%placeholder {
  color: red;
}
.my-thing {
  @extend %placeholder;
}

Expected SASS Output:

%placeholder
  color: red
.my-thing
  @extend %placeholder

Actual SASS Output:

placeholder
  color: red
.my-thing
  @extend placeholder

Not working ❌

The sass to scss conversion is giving the wrong output when using the selectors bellow:

• nth-child(n + *any-number*)
• nth-child(-n + *any-number*)

Working ✅

The following selectors are working properly

• nth-child(odd)
• nth-child(event)
• nth-child(1)
• nth-child(*any-number*)

Example

Input▶️

.cards
  &__wrapper
    +columns(3)
  &__wrapper
    padding-bottom: 50px
  &__wrapper:nth-child(3n+1)
    padding-right: 25px
  &__wrapper:nth-child(3n+2)
    padding-left: 12px
    padding-right: 12px
  &__wrapper:nth-child(3n+3)
    padding-left: 25px

Output ❌

.cards {
  &__wrapper {
    @include columns(3);
  }
  &__wrapper {
    padding-bottom: 50px;
  }
  false {
    padding-right: 25px;
  }
  false {
    padding-left: 12px;
    padding-right: 12px;
  }
  false {
    padding-left: 25px;
  }
}

Expected output ✅

.cards {
  &__wrapper {
    @include columns(3);
  }
  &__wrapper {
    padding-bottom: 50px;
  }
  &__wrapper:nth-child(3n+1) {
    padding-right: 25px;
  }
  &__wrapper:nth-child(3n+2) {
    padding-left: 12px;
    padding-right: 12px;
  }
  &__wrapper:nth-child(3n+3) {
    padding-left: 25px;
  }
}

Using sast to parse Sass string, turns out the comment line is included by the previous node.

First of all, thanks for creating this!

I just wanted to test your tool and saw that the indentation of the output is wrong when converting to sass, see the attached screenshot.

--> &.hidden should apply to lightbox-wrapper but does to lightbox.

Best,
Silvan

sass src:

\:root
   --c1: #{$-c1}
   --c2: #{$-c2}
   --c3: #{$-c3}
   --c4: #{$-c4}
   --c5: #{$-c5}
   --c6: #{$-c6}

scss res:

\:root {
  c1: #{$-c1};
  c2: #{$-c2};
  c3: #{$-c3};
  c4: #{$-c4};
  c5: #{$-c5};
  c6: #{$-c6};
}

If I have interpolation in sass code ( like .class-#{ $somevar } ) script ignores it and writes simply .class-$somevar in output

Hello, Manuel!
Your application is fantastic and one of the most correct in converting from sass to scss!
Thank you very much for your work!

However, when you enter a line like this:
@import ../../../node_modules/normalize.css/normalize

instead of the expected string:
@import "../../../node_modules/normalize.css/normalize";

as a result, we get this:
malformed input...

approximately the same thing happens if somewhere inside there is a space an empty character (here, for example, it is after .2s):

$trs32: ease-in-out .32s
$trs2: ease-in-out .2s 
$basecolor: #25549
$activecolor: #1f477f

Thank you for your time!
Regards, Sergio