Sass functions and mixins to manage CSS selectors.
npm install @unsass/selector@use "@unsass/selector";
@include selector.create("foo", "md") {
color: darkcyan;
}.md\:foo {
color: darkcyan;
}| Mixin | Description |
|---|---|
create($selector, $scope, $separator, $suffix, $pseudo-class, $pseudo-element, $root) |
Sets new CSS selector with class scope and pseudo options. |
Define your own scope separator character.
@use "@unsass/selector";
@include selector.create("foo", "md", "@") {
color: darkcyan;
}.md\@foo {
color: darkcyan;
}Define the scope value has a prefix on selector.
@use "@unsass/selector";
@include selector.create("foo", "md", $suffix: true) {
color: darkcyan;
}.foo\:md {
color: darkcyan;
}Define the pseudo class suffix.
@use "@unsass/selector";
@include selector.create("foo", "hover", $pseudo-class: "hover") {
color: darkcyan;
}.hover\:foo:hover {
color: darkcyan;
}Define the pseudo element suffix.
@use "@unsass/selector";
@include selector.create("foo", "before", $pseudo-element: "before") {
color: darkcyan;
}.before\:foo::before {
color: darkcyan;
}Wrap the selector with @at-root rule before code output.
@use "@unsass/selector";
.foo {
.bar {
@include selector.create(&, "md", $root: true) {
color: darkcyan;
}
}
}.md\:foo .bar {
color: darkcyan;
}