sass/sass-site

BUG: Incorrect statement on @import page - nested section

Closed this issue · 0 comments

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;
}