From 0901bbef85d0252946c81c8045e5f429f287ece4 Mon Sep 17 00:00:00 2001 From: Renat Galin Date: Wed, 8 Sep 2021 03:55:33 +0500 Subject: [PATCH] node-sass -> dart-sass migration --- package.json | 2 +- .../styles/spec/settings/materialColors.scss | 2 +- src/assets/styles/spec/utils/colors.scss | 20 +-- .../styles/spec/utils/layout/utils/gap.scss | 122 +++++++++--------- 4 files changed, 74 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index f1ff80b..2965386 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "html-webpack-plugin": "^5.3.1", "imagemin-webpack-plugin": "^2.4.2", "mini-css-extract-plugin": "^1.6.0", - "node-sass": "^4.14.1", + "sass": "^1.39.0", "postcss": "^8.3.4", "postcss-loader": "^6.1.0", "postcss-preset-env": "^6.7.0", diff --git a/src/assets/styles/spec/settings/materialColors.scss b/src/assets/styles/spec/settings/materialColors.scss index 703cbf2..b7e8b3e 100755 --- a/src/assets/styles/spec/settings/materialColors.scss +++ b/src/assets/styles/spec/settings/materialColors.scss @@ -547,4 +547,4 @@ $md-colors: ( blue-grey-700 : #455a64, blue-grey-800 : #37474f, blue-grey-900 : #263238, -) !global; +); diff --git a/src/assets/styles/spec/utils/colors.scss b/src/assets/styles/spec/utils/colors.scss index 06c8513..f8d4a0c 100755 --- a/src/assets/styles/spec/utils/colors.scss +++ b/src/assets/styles/spec/utils/colors.scss @@ -10,11 +10,11 @@ // --------------------------------------------------------- @each $item, $color in $md-colors { - .c-#{$item}, .cH-#{$item}:hover { color: $color !important; } - .bgc-#{$item}, .bgcH-#{$item}:hover { background-color: $color !important; } - .bdc-#{$item}, .bdcH-#{$item}:hover { border-color: $color !important; } - .fill-#{$item}, .fillH-#{$item}:hover { fill: $color !important; } - .str-#{$item}, .strH-#{$item}:hover { stroke: $color !important; } + .c-#{"" + $item}, .cH-#{"" + $item}:hover { color: $color !important; } + .bgc-#{"" + $item}, .bgcH-#{"" + $item}:hover { background-color: $color !important; } + .bdc-#{"" + $item}, .bdcH-#{"" + $item}:hover { border-color: $color !important; } + .fill-#{"" + $item}, .fillH-#{"" + $item}:hover { fill: $color !important; } + .str-#{"" + $item}, .strH-#{"" + $item}:hover { stroke: $color !important; } } // --------------------------------------------------------- @@ -22,9 +22,9 @@ // --------------------------------------------------------- @each $item, $color in $grey-colors-alt { - .c-#{$item}, .cH-#{$item}:hover { color: $color !important; } - .bgc-#{$item}, .bgcH-#{$item}:hover { background-color: $color !important; } - .bdc-#{$item}, .bdcH-#{$item}:hover { border-color: $color !important; } - .fill-#{$item}, .fillH-#{$item}:hover { fill: $color !important; } - .str-#{$item}, .strH-#{$item}:hover { stroke: $color !important; } + .c-#{"" + $item}, .cH-#{"" + $item}:hover { color: $color !important; } + .bgc-#{"" + $item}, .bgcH-#{"" + $item}:hover { background-color: $color !important; } + .bdc-#{"" + $item}, .bdcH-#{"" + $item}:hover { border-color: $color !important; } + .fill-#{"" + $item}, .fillH-#{"" + $item}:hover { fill: $color !important; } + .str-#{"" + $item}, .strH-#{"" + $item}:hover { stroke: $color !important; } } diff --git a/src/assets/styles/spec/utils/layout/utils/gap.scss b/src/assets/styles/spec/utils/layout/utils/gap.scss index 5697ea2..def4473 100755 --- a/src/assets/styles/spec/utils/layout/utils/gap.scss +++ b/src/assets/styles/spec/utils/layout/utils/gap.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // --------------------------------------------------------- // @TOC // --------------------------------------------------------- @@ -29,60 +31,60 @@ $responsive: true; @for $i from 0 through 4 { .gapX-#{$i} { - margin-left: #{($i / -2)}px !important; - margin-right: #{($i / -2)}px !important; + margin-left: #{math.div($i, -2)}px !important; + margin-right: #{math.div($i, -2)}px !important; & > * { - padding-left: #{($i / 2)}px !important; - padding-right: #{($i / 2)}px !important; + padding-left: #{math.div($i, 2)}px !important; + padding-right: #{math.div($i, 2)}px !important; } } .gapY-#{$i} { - margin-top: #{($i / -2)}px !important; - margin-bottom: #{($i / -2)}px !important; + margin-top: #{math.div($i, -2)}px !important; + margin-bottom: #{math.div($i, -2)}px !important; & > * { - padding-top: #{($i / 2)}px !important; - padding-bottom: #{($i / 2)}px !important; + padding-top: #{math.div($i, 2)}px !important; + padding-bottom: #{math.div($i, 2)}px !important; } } .gap-#{$i} { - margin: #{($i / -2)}px !important; + margin: #{math.div($i, -2)}px !important; & > * { - padding: #{($i / 2)}px !important; + padding: #{math.div($i, 2)}px !important; } } @if ($responsive == true) { @include generateResponsive() { .gapX-#{$i}\@#{$breakpointAlias} { - margin-left: #{($i / -2)}px !important; - margin-right: #{($i / -2)}px !important; + margin-left: #{math.div($i, -2)}px !important; + margin-right: #{math.div($i, -2)}px !important; & > * { - padding-left: #{($i / 2)}px !important; - padding-right: #{($i / 2)}px !important; + padding-left: #{math.div($i, 2)}px !important; + padding-right: #{math.div($i, 2)}px !important; } } .gapY-#{$i}\@#{$breakpointAlias} { - margin-top: #{($i / -2)}px !important; - margin-bottom: #{($i / -2)}px !important; + margin-top: #{math.div($i, -2)}px !important; + margin-bottom: #{math.div($i, -2)}px !important; & > * { - padding-top: #{($i / 2)}px !important; - padding-bottom: #{($i / 2)}px !important; + padding-top: #{math.div($i, 2)}px !important; + padding-bottom: #{math.div($i, 2)}px !important; } } .gap-#{$i}\@#{$breakpointAlias} { - margin: #{($i / -2)}px !important; + margin: #{math.div($i, -2)}px !important; & > * { - padding: #{($i / 2)}px !important; + padding: #{math.div($i, 2)}px !important; } } } @@ -96,60 +98,60 @@ $responsive: true; @for $i from 5 through 35 { @if $i % 5 == 0 { .gapX-#{$i} { - margin-left: #{($i / -2)}px !important; - margin-right: #{($i / -2)}px !important; + margin-left: #{math.div($i, -2)}px !important; + margin-right: #{math.div($i, -2)}px !important; & > * { - padding-left: #{($i / 2)}px !important; - padding-right: #{($i / 2)}px !important; + padding-left: #{math.div($i, 2)}px !important; + padding-right: #{math.div($i, 2)}px !important; } } .gapY-#{$i} { - margin-top: #{($i / -2)}px !important; - margin-bottom: #{($i / -2)}px !important; + margin-top: #{math.div($i, -2)}px !important; + margin-bottom: #{math.div($i, -2)}px !important; & > * { - padding-top: #{($i / 2)}px !important; - padding-bottom: #{($i / 2)}px !important; + padding-top: #{math.div($i, 2)}px !important; + padding-bottom: #{math.div($i, 2)}px !important; } } .gap-#{$i} { - margin: #{($i / -2)}px !important; + margin: #{math.div($i, -2)}px !important; & > * { - padding: #{($i / 2)}px !important; + padding: #{math.div($i, 2)}px !important; } } @if ($responsive == true) { @include generateResponsive() { .gapX-#{$i}\@#{$breakpointAlias} { - margin-left: #{($i / -2)}px !important; - margin-right: #{($i / -2)}px !important; + margin-left: #{math.div($i, -2)}px !important; + margin-right: #{math.div($i, -2)}px !important; & > * { - padding-left: #{($i / 2)}px !important; - padding-right: #{($i / 2)}px !important; + padding-left: #{math.div($i, 2)}px !important; + padding-right: #{math.div($i, 2)}px !important; } } .gapY-#{$i}\@#{$breakpointAlias} { - margin-top: #{($i / -2)}px !important; - margin-bottom: #{($i / -2)}px !important; + margin-top: #{math.div($i, -2)}px !important; + margin-bottom: #{math.div($i, -2)}px !important; & > * { - padding-top: #{($i / 2)}px !important; - padding-bottom: #{($i / 2)}px !important; + padding-top: #{math.div($i, 2)}px !important; + padding-bottom: #{math.div($i, 2)}px !important; } } .gap-#{$i}\@#{$breakpointAlias} { - margin: #{($i / -2)}px !important; + margin: #{math.div($i, -2)}px !important; & > * { - padding: #{($i / 2)}px !important; + padding: #{math.div($i, 2)}px !important; } } } @@ -164,60 +166,60 @@ $responsive: true; @for $i from 40 through 160 { @if $i % 10 == 0 { .gapX-#{$i} { - margin-left: #{($i / -2)}px !important; - margin-right: #{($i / -2)}px !important; + margin-left: #{math.div($i, -2)}px !important; + margin-right: #{math.div($i, -2)}px !important; & > * { - padding-left: #{($i / 2)}px !important; - padding-right: #{($i / 2)}px !important; + padding-left: #{math.div($i, 2)}px !important; + padding-right: #{math.div($i, 2)}px !important; } } .gapY-#{$i} { - margin-top: #{($i / -2)}px !important; - margin-bottom: #{($i / -2)}px !important; + margin-top: #{math.div($i, -2)}px !important; + margin-bottom: #{math.div($i, -2)}px !important; & > * { - padding-top: #{($i / 2)}px !important; - padding-bottom: #{($i / 2)}px !important; + padding-top: #{math.div($i, 2)}px !important; + padding-bottom: #{math.div($i, 2)}px !important; } } .gap-#{$i} { - margin: #{($i / -2)}px !important; + margin: #{math.div($i, -2)}px !important; & > * { - padding: #{($i / 2)}px !important; + padding: #{math.div($i, 2)}px !important; } } @if ($responsive == true) { @include generateResponsive() { .gapX-#{$i}\@#{$breakpointAlias} { - margin-left: #{($i / -2)}px !important; - margin-right: #{($i / -2)}px !important; + margin-left: #{math.div($i, -2)}px !important; + margin-right: #{math.div($i, -2)}px !important; & > * { - padding-left: #{($i / 2)}px !important; - padding-right: #{($i / 2)}px !important; + padding-left: #{math.div($i, 2)}px !important; + padding-right: #{math.div($i, 2)}px !important; } } .gapY-#{$i}\@#{$breakpointAlias} { - margin-top: #{($i / -2)}px !important; - margin-bottom: #{($i / -2)}px !important; + margin-top: #{math.div($i, -2)}px !important; + margin-bottom: #{math.div($i, -2)}px !important; & > * { - padding-top: #{($i / 2)}px !important; - padding-bottom: #{($i / 2)}px !important; + padding-top: #{math.div($i, 2)}px !important; + padding-bottom: #{math.div($i, 2)}px !important; } } .gap-#{$i}\@#{$breakpointAlias} { - margin: #{($i / -2)}px !important; + margin: #{math.div($i, -2)}px !important; & > * { - padding: #{($i / 2)}px !important; + padding: #{math.div($i, 2)}px !important; } } }