Selector

Introduction

Sass functions and mixins to manage CSS selectors.

Installing

npm install @unsass/selector

Usage

@use "@unsass/selector";

@include selector.create("foo", "md") {
    color: darkcyan;
}

Result

.md\:foo {
    color: darkcyan;
}

API

| Mixin | Description | |-----------------------------------------------------------------------------------------|------------------------------------------------------------| | create($selector, $scope, $separator, $suffix, $pseudo-class, $pseudo-element, $root) | Sets new CSS selector with class scope and pseudo options. |

$separator

Define your own scope separator character.

@use "@unsass/selector";

@include selector.create("foo", "md", "@") {
    color: darkcyan;
}

Result

.md\@foo {
    color: darkcyan;
}

$suffix

Define the scope value has a prefix on selector.

@use "@unsass/selector";

@include selector.create("foo", "md", $suffix: true) {
    color: darkcyan;
}

Result

.foo\:md {
    color: darkcyan;
}

$pseudo-class

Define the pseudo class suffix.

@use "@unsass/selector";

@include selector.create("foo", "hover", $pseudo-class: "hover") {
    color: darkcyan;
}

Result

.hover\:foo:hover {
    color: darkcyan;
}

$pseudo-element

Define the pseudo element suffix.

@use "@unsass/selector";

@include selector.create("foo", "before", $pseudo-element: "before") {
    color: darkcyan;
}

Result

.before\:foo::before {
    color: darkcyan;
}

$root

Wrap the selector with @at-root rule before code output.

@use "@unsass/selector";

.foo {
    .bar {
        @include selector.create(&, "md", $root: true) {
            color: darkcyan;
        }
    }
}

Result

.md\:foo .bar {
    color: darkcyan;
}