Sass selector functions offer powerful tools to manipulate and query CSS selectors directly within your stylesheets. They allow you to create dynamic, responsive, and maintainable styles by providing functions for combining, manipulating, and inspecting selectors. This guide delves into the essential Sass selector functions with practical examples.

Overview of Sass Selector Functions:

Sass provides a set of functions specifically designed to work with CSS selectors, making it easier to handle complex styling scenarios. The key functions include:

  1. selector-nest()
  2. selector-append()
  3. selector-extend()
  4. selector-replace()
  5. selector-unify()
  6. is-superselector()
  7. simple-selectors()
  8. selector-parse()
1. selector-nest(): Nesting Selectors

The selector-nest() function combines multiple selectors into a nested selector.

Syntax: selector-nest($selectors...)

Example:

$parent: '.container';
$child: '.item';

.nested-selector {
  content: selector-nest($parent, $child);
}

Compiled CSS:

.nested-selector {
  content: ".container .item";
}
2. selector-append(): Appending Selectors

The selector-append() function appends a selector to another selector, creating a more specific selector.

Syntax: selector-append($selectors...)

Example:

$base: '.button';
$state: ':hover';

.button-hover {
  content: selector-append($base, $state);
}

Compiled CSS:

.button-hover {
  content: ".button:hover";
}
3. selector-extend(): Extending Selectors

The selector-extend() function replaces a target selector within a given selector with another selector.

Syntax: selector-extend($selector, $extendee, $extender)

Example:

$original: '.btn';
$target: '.primary-btn';

.extended-selector {
  content: selector-extend($original, '.btn', $target);
}

Compiled CSS:

.extended-selector {
  content: ".primary-btn";
}
4. selector-replace(): Replacing Selectors

The selector-replace() function replaces parts of a selector with a different selector.

Syntax: selector-replace($selector, $original, $replacement)

Example:

$selector: '.menu li';
$original: 'li';
$replacement: 'a';

.replaced-selector {
  content: selector-replace($selector, $original, $replacement);
}

Compiled CSS:

.replaced-selector {
  content: ".menu a";
}

5. selector-unify(): Unifying Selectors

The selector-unify() function combines two selectors into a single selector, only if they can be combined without changing their meaning.

Syntax: selector-unify($selector1, $selector2)

Example:

$first: '.nav';
$second: '.nav > .item';

.unified-selector {
  content: selector-unify($first, $second);
}

Compiled CSS:

.unified-selector {
  content: ".nav > .item";
}
6. is-superselector(): Checking Superselectors

The is-superselector() function checks if one selector matches everything that another selector matches.

Syntax: is-superselector($super, $sub)

Example:

$super: '.container';
$sub: '.container .item';

.super-check {
  content: is-superselector($super, $sub);
}

Compiled CSS:

.super-check {
  content: "true";
}
7. simple-selectors(): Extracting Simple Selectors

The simple-selectors() function extracts simple selectors (such as classes, IDs, or type selectors) from a complex selector.

Syntax: simple-selectors($selector)

Example:

$complex: '.header, #main, h1';

.simple-selector-list {
  content: simple-selectors($complex);
}

Compiled CSS:

.simple-selector-list {
  content: ".header, #main, h1";
}
8. selector-parse(): Parsing Selectors

The selector-parse() function converts a string into a list of simple selectors.

Syntax: selector-parse($selector)

Example:

$selector-string: '.class1.class2';

.parsed-selector {
  content: selector-parse($selector-string);
}

Compiled CSS:

.parsed-selector {
  content: ".class1, .class2";
}

Practical Use Cases:

1. Complex Nesting:

Combine selectors for deeply nested elements without repetitive code.

Example:

$parent: '.sidebar';
$child: '.link';

.sidebar-link {
  content: selector-nest($parent, $child);
}

Compiled CSS:

.sidebar-link {
  content: ".sidebar .link";
}
2. Stateful Styles:

Append pseudo-classes or pseudo-elements to base selectors.

Example:

$base: '.btn';
$state: ':active';

.active-button {
  content: selector-append($base, $state);
}

Compiled CSS:

.active-button {
  content: ".btn:active";
}
3. Theming Extensions:

Extend base styles to specific themed elements.

Example:

$base: '.box';
$theme: '.dark-theme';

.themed-box {
  content: selector-extend($base, '.box', $theme);
}

Compiled CSS:

.themed-box {
  content: ".dark-theme";
}

Conclusion:

Sass selector functions enhance the capability to manage and manipulate CSS selectors within your stylesheets. By providing tools for nesting, appending, extending, and querying selectors, these functions facilitate the creation of flexible, maintainable, and dynamic styles. Incorporate Sass selector functions into your workflow to streamline complex styling scenarios and improve the organization of your CSS.