insert-selector

SCSS mixin for adding a selector into a nested list.

It automatically adds class, ID, attribute, and pseudo selectors to the end of the target. It adds elements to the front.

Requirements

Dart Sass >=1.23.0 for @use module syntax

Install

npm install insert-selector

yarn add insert-selector

Usage

Import the mixin at the top of your .scss file.

If using module syntax (it's the future)(and also the default), and you can use the package import:

@use "insert-selector" as *;

// With Dart Sass 1.71.0, you can use the pkg: importer
@use "pkg:insert-selector" as *;

// The old way, something like this
@use "../../../../node_modules/insert-selector/insert-selector" as *;

You can also use a load path to make it cleaner. (Load path in CLI docs)

If using @import syntax:

@import "insert-selector-import";

/// @param {string} $target
///   the target element in the tree
/// @param {string} $insert
///   the element or modifier you want to insert
/// @param {boolean} $child, default false
///   if true, the $insert is a separate child element in the selector tree
/// @return {string}
///   full new element tree

@include insert-selector("#target", ".insert");
@include insert-selector("#target", ".insert", true);

Examples

.product-info {
  .row-fluid {
    .price-info {
      display: grid;

      .buy-info {
        grid-column: 1;

        @include insert-selector(".row-fluid", ".active") {
          grid-column: 3;
        }

        @include insert-selector(".row-fluid", ".outOfStock", true) {
          grid-column: 2;
        }
      }
    }
  }
}

compiles to

.product-info .row-fluid .price-info {
  display: grid;
}
.product-info .row-fluid .price-info .buy-info {
  grid-column: 1;
}
.product-info .row-fluid.active .price-info .buy-info {
  grid-column: 3;
}
.product-info .row-fluid .outOfStock .price-info .buy-info {
  grid-column: 2;
}

Why would I want this?

You're probably on a legacy system that has difficult to navigate element trees for selectors. Ideally, the markup doesn't look like this, but sometimes it's out of your hands. Hopefully this helps!