https://github.com/unsass/selector

Sass functions and mixins to manage CSS selectors.
https://github.com/unsass/selector

sass selector

Last synced: 16 days ago
JSON representation

Sass functions and mixins to manage CSS selectors.

• Host: GitHub
• URL: https://github.com/unsass/selector
• Owner: unsass
• License: mit
• Created: 2022-08-26T14:00:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-11T21:53:16.000Z (over 1 year ago)
• Last Synced: 2025-01-04T13:34:27.816Z (about 1 month ago)
• Topics: sass, selector
• Language: SCSS
• Homepage:
• Size: 1.76 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Selector

[![Version](https://flat.badgen.net/npm/v/@unsass/selector)](https://www.npmjs.com/package/@unsass/selector)

[![Downloads](https://flat.badgen.net/npm/dt/@unsass/selector)](https://www.npmjs.com/package/@unsass/selector)

[![License](https://flat.badgen.net/npm/license/@unsass/selector)](https://www.npmjs.com/package/@unsass/selector)

## Introduction

Sass functions and mixins to manage CSS selectors.

## Installing

```shell

npm install @unsass/selector

```

## Usage

```scss

@use "@unsass/selector";

@include selector.create("foo", "md") {

    color: darkcyan;

}

```

### Result

```css

.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.

```scss

@use "@unsass/selector";

@include selector.create("foo", "md", "@") {

    color: darkcyan;

}

```

### Result

```css

.md\@foo {

    color: darkcyan;

}

```

### `$suffix`

Define the scope value has a prefix on selector.

```scss

@use "@unsass/selector";

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

    color: darkcyan;

}

```

### Result

```css

.foo\:md {

    color: darkcyan;

}

```

### `$pseudo-class`

Define the pseudo class suffix.

```scss

@use "@unsass/selector";

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

    color: darkcyan;

}

```

### Result

```css

.hover\:foo:hover {

    color: darkcyan;

}

```

### `$pseudo-element`

Define the pseudo element suffix.

```scss

@use "@unsass/selector";

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

    color: darkcyan;

}

```

### Result

```css

.before\:foo::before {

    color: darkcyan;

}

```

### `$root`

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

```scss

@use "@unsass/selector";

.foo {

    .bar {

        @include selector.create(&, "md", $root: true) {

            color: darkcyan;

        }

    }

}

```

### Result

```css

.md\:foo .bar {

    color: darkcyan;

}

```