This is a sass library that enables to limit the scope of custom properties(which is called CSS Variable
) to :host
.
https://nontangent.github.io/angular-scoped-var-demo/
source: https://github.com/nontangent/angular-scoped-var-demo
$ npm i -D scoped-var
If you want to let custom properties scoped in :host
, you should add @use 'scoped-var' as *;
to the top of .scss
file.
@use 'scoped-var' as *;
:host {
// Define host scoped variable by `@mixin property($name, $value)`
@include property(--color, red);
}
:host {
// Use host scoped variable
color: var(--color);
}
The above code will compiled as below.(@@@@@@@@
is random characters.)
:host {
--color: red;
--color-SCOPED-IN-@@@@@@@@: var(--color);
}
:host {
color: var(--color-SCOPED-IN-@@@@@@@@);
}
In this case, you can override :host
scoped custom property in first-child
and second-child
from parent
component.
// parant.component.scss
@use 'scoped-var' as *;
:host {
@include property(--color, blue);
}
:host {
first-child {
--color: #{var(--color)};
}
second-child {
--color: #{var(--color)};
}
}
If you use scoped-var
as non strict mode, this library does not raise error when you use undefined variable in :host
.
@use 'scoped-var' as *;
:host {
color: var(--color);
// this code is compiled as below. not changed.
// color: var(--color);
}
If you want to prohibit the use of variables that are not defined in the scope, you should use @use 'scoped-var/strict' as *;
.
@use 'scoped-var/strict' as *;
:host {
color: var(--color);
}
In this case, you failed to compile and compiler throw following error.
SassError: `var(--color)` scoped in `9unvsa3y` is not defined`
If you use external property in strict mode, you should use @mixin external-property($name)
.
@use 'scoped-var/strict' as *;
:host {
@include external-property(--color);
}
:host {
color: var(--color);
}
In this case, no error was thrown.
MIT