Skip to content

Commit 0ff2c5b

Browse files
firestar300firestar300
committed
refactor (scss): use @use as *
1 parent 42ee673 commit 0ff2c5b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+289
-293
lines changed

‎src/scss/02-tools/_f-column.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use "sass:meta";
2-
@use "../01-abstract/variables";
2+
@use "../01-abstract/variables" as *;
33

44
@use "sass:map";
55
@use "sass:math";
@@ -58,7 +58,7 @@
5858

5959
@if not $var {
6060

61-
@return map.get(map.get(variables.$column-preset, $device), $prop);
61+
@return map.get(map.get($column-preset, $device), $prop);
6262
} @else {
6363

6464
@return $var;
@@ -79,7 +79,7 @@
7979
$device: d;
8080
}
8181

82-
$preset: map.get(variables.$column-preset, $device);
82+
$preset: map.get($column-preset, $device);
8383
$gutter-width: map.get($preset, gutter-width);
8484
$column-width: map.get($preset, column-width);
8585
$total-column: column-set-var($total-column, $device, total-column);
@@ -107,7 +107,7 @@
107107
$device: d;
108108
}
109109

110-
$preset: map.get(variables.$column-preset, $device);
110+
$preset: map.get($column-preset, $device);
111111
$gutter-width: map.get($preset, gutter-width);
112112
$column-width: map.get($preset, column-width);
113113

@@ -134,7 +134,7 @@
134134
$device: d;
135135
}
136136

137-
$preset: map.get(variables.$column-preset, $device);
137+
$preset: map.get($column-preset, $device);
138138
$gutter-width: map.get($preset, gutter-width);
139139
$column-width: map.get($preset, column-width);
140140
$total-column: map.get($preset, total-column);

‎src/scss/02-tools/_f-context-align.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "../01-abstract/variables";
1+
@use "../01-abstract/variables" as *;
22

33
/**
44
* Align - Make a context align (editor / style)
@@ -29,13 +29,13 @@ $function-context-align-last-value: "";
2929

3030
@function context-align($value: null, $suffix: " > ") {
3131
@if not $value {
32-
@if (variables.$entry-file-name == "style") {
32+
@if ($entry-file-name == "style") {
3333
@return ".align" + $function-context-align-last-value;
3434
}
3535
} @else {
3636
$function-context-align-last-value: $value !global;
3737

38-
@if (variables.$entry-file-name == "editor") {
38+
@if ($entry-file-name == "editor") {
3939
@return "[data-align=\"" + $value + "\"]" + $suffix;
4040
}
4141
}

‎src/scss/02-tools/_f-context-selector.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use "sass:meta";
2-
@use "../01-abstract/variables";
2+
@use "../01-abstract/variables" as *;
33

44
/**
55
* Context selector - Make a context selector (editor / style)
@@ -56,9 +56,9 @@
5656
$full-selector: "";
5757
$parent: "";
5858

59-
@if (variables.$entry-file-name == "editor" and $editor) {
59+
@if ($entry-file-name == "editor" and $editor) {
6060
$parent: $editor;
61-
} @else if (variables.$entry-file-name == "style" and $default) {
61+
} @else if ($entry-file-name == "style" and $default) {
6262
$parent: $default;
6363
} @else {
6464
@return $selector;

‎src/scss/02-tools/_f-em.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use "../01-abstract/variables";
2-
@use "f-strip-units";
1+
@use "../01-abstract/variables" as *;
2+
@use "f-strip-units" as *;
33

44
@use "sass:math";
55

@@ -23,14 +23,14 @@
2323
*
2424
*/
2525

26-
@function em($pxval, $base: variables.$font-size-base) {
26+
@function em($pxval, $base: $font-size-base) {
2727

2828
@if not math.is-unitless($pxval) {
29-
$pxval: f-strip-units.strip-units($pxval);
29+
$pxval: strip-units($pxval);
3030
}
3131

3232
@if not math.is-unitless($base) {
33-
$base: f-strip-units.strip-units($base);
33+
$base: strip-units($base);
3434
}
3535

3636
@return math.div($pxval, $base) * 1em;

‎src/scss/02-tools/_f-fluid-size.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use "../01-abstract/variables";
2-
@use "f-strip-units";
1+
@use "../01-abstract/variables" as *;
2+
@use "f-strip-units" as *;
33

44
/**
55
* Fluid size
@@ -28,8 +28,8 @@
2828
@use "sass:math";
2929

3030
@function fluid-size($min, $max, $start: xs, $end: sm) {
31-
$start: math.div(map.get(variables.$breakpoints, $start), 100);
32-
$end: math.div(map.get(variables.$breakpoints, $end), 100);
31+
$start: math.div(map.get($breakpoints, $start), 100);
32+
$end: math.div(map.get($breakpoints, $end), 100);
3333

34-
@return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{f-strip-units.strip-units($max - $min)}, #{$max});
34+
@return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max});
3535
}

‎src/scss/02-tools/_f-get-gutter-width.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
@use "../01-abstract/variables";
2-
1+
@use "../01-abstract/variables" as *;
32
@use "sass:map";
43

54
/**
@@ -26,7 +25,7 @@
2625
*/
2726

2827
@function get-gutter($preset: d) {
29-
@return map.get(map.get(variables.$column-preset, $preset), gutter-width);
28+
@return map.get(map.get($column-preset, $preset), gutter-width);
3029
}
3130

3231
@function get-gutter-width($preset: d) {

‎src/scss/02-tools/_f-get-svg-url.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "../01-abstract/variables";
1+
@use "../01-abstract/variables" as *;
22
@use "sass:color";
33
@use "sass:list";
44
@use "sass:map";
@@ -33,7 +33,7 @@
3333
*
3434
*/
3535

36-
@function get-svg-url($name: null, $fill: variables.$color-dark, $opacity: 1, $style: "") {
36+
@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") {
3737

3838
$svgs: (
3939
// name-of-the-svg: (viewBox, content of the svg element)

‎src/scss/02-tools/_m-bg-fullwidth.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use "../01-abstract/variables";
2-
@use "m-style-only";
1+
@use "../01-abstract/variables" as *;
2+
@use "m-style-only" as *;
33

44
/**
55
* Background fullwidth - Make a fullwidth background in a container element
@@ -16,7 +16,7 @@
1616
*
1717
*/
1818

19-
@mixin bg-fullwidth($color: variables.$color-grey-100) {
19+
@mixin bg-fullwidth($color: $color-grey-100) {
2020
position: relative;
2121

2222
&::before {
@@ -30,7 +30,7 @@
3030
background-color: $color;
3131
transform: translate3d(-50%, 0, 0);
3232

33-
@include m-style-only.style-only {
33+
@include style-only {
3434
z-index: -1;
3535
}
3636
}

‎src/scss/02-tools/_m-breakpoint.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "sass:meta";
2-
@use "../01-abstract/variables";
3-
@use "f-em";
2+
@use "../01-abstract/variables" as *;
3+
@use "f-em" as *;
44

55
@use "sass:map";
66

@@ -28,19 +28,19 @@
2828
@mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) {
2929
$font-size: 16px; // don't use em function whitout param, $font-size-base can be modified
3030

31-
@if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") {
31+
@if (meta.type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") {
3232

33-
@media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) and (max-width: f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) {
33+
@media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) and (max-width: em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) {
3434
@content;
3535
}
3636
} @else if ($min-or-max-or-breakpoint == max) {
3737

38-
@media screen and (max-width: f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)) {
38+
@media screen and (max-width: em(map.get($breakpoints, $breakpoint) - 1, $font-size)) {
3939
@content;
4040
}
4141
} @else {
4242

43-
@media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) {
43+
@media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) {
4444
@content;
4545
}
4646
}

‎src/scss/02-tools/_m-btn.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use "../01-abstract/variables";
2-
@use "m-hover";
1+
@use "../01-abstract/variables" as *;
2+
@use "m-hover" as *;
33

44
/**
55
* Button - All mixins for buttons - Used in src/scss/05-components/_btn.scss
@@ -34,21 +34,21 @@
3434
font-size: 12px;
3535
font-weight: 700;
3636
line-height: 16px;
37-
color: variables.$color-dark;
37+
color: $color-dark;
3838
text-align: center;
39-
background-color: variables.$color-primary;
39+
background-color: $color-primary;
4040
border-radius: 10px;
4141

42-
@include m-hover.hover {
42+
@include hover {
4343
@include btn-block-hover;
4444
}
4545
}
4646

4747
// hover of the button block
4848

4949
@mixin btn-block-hover {
50-
color: variables.$color-primary;
51-
background-color: variables.$color-dark;
50+
color: $color-primary;
51+
background-color: $color-dark;
5252
}
5353

5454
// Coloring
@@ -57,7 +57,7 @@
5757
color: $color;
5858
background-color: $background-color;
5959

60-
@include m-hover.hover {
60+
@include hover {
6161
color: $background-color;
6262
background-color: $color;
6363
}
@@ -70,7 +70,7 @@
7070
background-color: transparent;
7171
border: 2px solid currentColor; // Force button width VS Gutenberg CSS
7272

73-
@include m-hover.hover {
73+
@include hover {
7474
@include btn-block-outline-hover;
7575
}
7676
}

‎src/scss/02-tools/_m-checkbox-custom.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@use "../01-abstract/variables";
2-
@use "m-rtl";
3-
@use "m-sr-only";
1+
@use "../01-abstract/variables" as *;
2+
@use "m-rtl" as *;
3+
@use "m-sr-only" as *;
44

55
@use "sass:math";
66

@@ -25,8 +25,8 @@
2525
*
2626
*/
2727

28-
@mixin checkbox-custom($color: variables.$color-primary, $size: 18px, $border-width: 1px) {
29-
@include m-sr-only.sr-only;
28+
@mixin checkbox-custom($color: $color-primary, $size: 18px, $border-width: 1px) {
29+
@include sr-only;
3030

3131
+ label {
3232
position: relative;
@@ -42,10 +42,10 @@
4242
height: $size;
4343
margin: 0;
4444
content: "";
45-
background-color: variables.$color-light;
45+
background-color: $color-light;
4646
border: $border-width solid $color;
4747

48-
@include m-rtl.rtl {
48+
@include rtl {
4949
right: 0;
5050
left: auto;
5151
}
@@ -65,7 +65,7 @@
6565
transition: opacity .2s;
6666
transform: translate(-50%, -50%) rotate(-45deg);
6767

68-
@include m-rtl.rtl {
68+
@include rtl {
6969
right: math.round(math.div($size, 2));
7070
left: auto;
7171
transform: translate(50%, -50%) rotate(-45deg);

‎src/scss/02-tools/_m-container-query.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "sass:meta";
2-
@use "../01-abstract/variables";
3-
@use "f-em";
2+
@use "../01-abstract/variables" as *;
3+
@use "f-em" as *;
44

55
@use "sass:map";
66

@@ -29,21 +29,21 @@
2929
@mixin container-query($breakpoint, $min-or-max-or-breakpoint: min, $container-name: "") {
3030
$font-size: 16px; // don't use em function whitout param, $font-size-base can be modified
3131

32-
@if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") {
32+
@if (meta.type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") {
3333

34-
@container #{$container-name} (min-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)}) and (max-width: #{f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) {
34+
@container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) and (max-width: #{em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) {
3535

3636
@content;
3737
}
3838
} @else if ($min-or-max-or-breakpoint == max) {
3939

40-
@container #{$container-name} (max-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)}) {
40+
@container #{$container-name} (max-width: #{em(map.get($breakpoints, $breakpoint) - 1, $font-size)}) {
4141

4242
@content;
4343
}
4444
} @else {
4545

46-
@container #{$container-name} (min-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)}) {
46+
@container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) {
4747

4848
@content;
4949
}

‎src/scss/02-tools/_m-container.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "../01-abstract/variables";
1+
@use "../01-abstract/variables" as *;
22

33
/**
44
* Container
@@ -15,7 +15,7 @@
1515
*
1616
*/
1717

18-
@mixin container($size: variables.$container-wide) {
18+
@mixin container($size: $container-wide) {
1919
width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2));
2020
margin-inline: auto;
2121
}

‎src/scss/02-tools/_m-editor-only.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "../01-abstract/variables";
1+
@use "../01-abstract/variables" as *;
22

33
/**
44
* Editor style only
@@ -20,7 +20,7 @@
2020
*/
2121

2222
@mixin editor-only {
23-
@if (variables.$entry-file-name == "editor") {
23+
@if ($entry-file-name == "editor") {
2424
@content;
2525
}
2626
}

‎src/scss/02-tools/_m-heading.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "../01-abstract/variables";
1+
@use "../01-abstract/variables" as *;
22

33
/**
44
* Heading - Used in src/scss/06-blocks/core/_heading.scss
@@ -44,7 +44,7 @@
4444
*/
4545

4646
@mixin heading($name: h1, $style: default) {
47-
font-family: variables.$font-family-primary;
47+
font-family: $font-family-primary;
4848
font-weight: 400;
4949

5050
@if $name == h1 {

0 commit comments

Comments
 (0)