BUG: Incorrect statement on @import page - nested section
Closed this issue · 0 comments
dkjain commented
Hy,
In my local testing, the following statement turns out to be incorrect in the nested section of @import page.
Note that top-level mixins, functions, and variables defined in the nested import are still defined globally,
I tested by trying to access variable ($primary
) defined inside the imported stylesheet (lib/_colors.scss
), outside of the nested @import rule and bang, got compile error.
/* Error: Undefined variable.
* ,
* 9 | color: $primary;
* | ^^^^^^^^
* '
* style.scss 9:9 root stylesheet */
style.scss
/* Main styles*/
.box {
display: block;
@import "lib/_colors";
}
//$primary defined in lib/_colors
.is-primary {
color: $primary;
}
Colors.scss (lib/_colors.scss)
$black: #000 !default;
$primary: #0a0a0a !default;
$secondary: #d4d4d4;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
code {
border-radius: $border-radius;
box-shadow: $box-shadow;
color: $primary;
}
However, $primary
is available inside the nested context. Thus the statement seems to me, incorrect. Please LMK if I am missing anything.
...top-level mixins, functions, and variables defined in the nested import are still defined globally,
This works
.box {
display: block;
@import "lib/_colors";
color: $primary;
}