EDUCBA

Home Software Development Software Development Tutorials CSS Tutorial SASS Selectors

SASS Selectors

Mahantesh Nagathan
Article byMahantesh Nagathan
Priya Pedamkar
Reviewed byRavi Rathore

Updated April 5, 2023

SASS Selectors

 

 

Introduction to SASS Selectors

The SASS selector functions enable the CSS selectors to be checked and manipulated in a style sheet. The functions inspect and manage selectors within the SASS module. Whenever a selector is returned it is always a comma-separated list (the selector list), containing space-separated lists (the complex selectors), containing unquoted strings (the selectors of the compounds).

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Types of SASS Selectors Functions

Following are the different types of selector functions in SASS:

  1. selector-append
  2. selector-extend
  3. selector-nest
  4. selector-replace
  5. selector-unify
  6. simple-selectors

The following are the examples that depict the usage of SASS selector functions along with their description and syntax. In every example, we used the interpolation variable to evaluate the expressions and yield the result that the variables are substituted with their respective values in memory.

Below we will discuss how to use selector functions in SASS with the help of examples:

SASS Selector Functions

1. Sass append() Function

The selector-append() function incorporates $selectors between them without any white space. The function generates a new selector with the second and subsequent selectors attached to the first selector without spaces. If a selector list is any selector in $selectors, then each complex selector is integrated separately.

Syntax:

selector-append(selectors)

The selectors parameter is a required parameter that defines the multiple CSS selectors.

Example:

Create an HTML file called sass_append.html with the below code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Selector Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_append.css"/>
</head>
<body><br>
<nav>
<ul>
<li><a href="/"> Home </a></li>
<li><a href="/aboutus/" class="active"> About Us </a></li>
<li><a href="/courses/"> Courses </a></li>
<li><a href="/contactus/"> Contact Us </a></li>
</ul>
</nav>
</body>
</html>

Now create a file called sass_append.scss with the below code:

$selector: selector-append("a",".active");
#{$selector}{
font-size: 25px;
color:red;
font-style:bold;
}

Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.

sass –watch sass_append.scss: sass_append.css

Now, execute the file with the above command and it will create the sass_append.css file as shown in the below code:

sa.active {
font-size: 25px;
color: red;
font-style: bold;
}

Output:

  • Save the above given html code in sass_append.html file.
  • Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.

SASS Selectors Example 1

2. Sass selector_extend() Function

The selector-extend() function substitutes $extendee in $selector with $extendee, $extender for all instances. If $selector contains no $extendee, return everything as-is

Syntax:

selector-extend (selector, extendee, extender)
  • The selector parameter is a required parameter that defines the CSS selector.
  • The extendee parameter is a required parameter that defines an extendee.
  • The extender parameter is a required parameter that defines an extender.

Example:

Create an HTML file called sass_extend.html with the below code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Selector Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_extend.css"/>
</head>
<body><br>
<nav>
<ul>
<li><a href="/"> Home </a></li>
<li><a href="/aboutus/" class="active"> About Us </a></li>
<li><a href="/courses/"> Courses </a></li>
<li><a href="/contactus/" class="link"> Contact Us </a></li>
</ul>
</nav>
</body>
</html>

Create a file called sass_extend.scss with the below code:

$selector: selector-extend("a.active","a",".link");
#{$selector}{
font-size: 20px;
color:#F4A460;
font-style:bold;
}

Execute the file with the command which is shown in the previous example and it will create the sass_extend.css file with the below code:

a.active, .active.link {
font-size: 20px;
color: #F4A460;
font-style: bold;
}

Output:

  • Save the above given html code in sass_extend.html file.
  • Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.

SASS Selectors Example 2

3. Sass selector_nest() Function

The selector-nest() function integrates $selectors in the style sheet like they were nested inside each other. It produces a new selector based on the list given, comprising a nested list of CSS selectors.

Syntax:

selector-nest (selectors)

The selectors parameter is a required parameter that defines multiple CSS selector.

Example:

Create an HTML file called sass_nest.html with the below code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Selector Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_nest.css"/>
</head>
<body><br>
<div class="heading">
<p> Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals. </p>
</div>
<div class="heading1">
<p> It is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain. </p>
</div>
</body>
</html>

Create a file called sass_nest.scss with the below code:

$selector: selector-nest(".heading, .heading1","p");
#{$selector}{
font-size: 20px;
color:blue;
font-style:italic;
}

Execute the above files and it will create the sass_nest.css file with the below code:

.heading p, .heading1 p {
font-size: 20px;
color: blue;
font-style: italic;
}

Output:

  • Save the above given html code in sass_nest.html file.
  • Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.

nest() Function Example 3

4. Sass selector_replace() Function

The selector-replace() function provides a $selector copy, with all $original instances substituted by $replacement. If $selector has no original, $return it as-is. It yields a new selector, with the selectors listed in a replacement instead of the original selectors.

Syntax:

selector-replace(selector, original, replacement)
  • The selector parameter is a required parameter that defines the CSS selector.
  • The original parameter is a required parameter that defines the original CSS subsector.
  • The replacement parameter is a required parameter that defines the replacement CSS subsector.

Example:

Create an HTML file called sass_replace.html with the below code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Selector Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_replace.css"/>
</head>
<body><br>
<nav>
<ul>
<li><a href="/"> Home </a></li>
<li><a href="/aboutus/" class="class"> About Us </a></li>
<li><a href="/courses/" class="class1"> Courses </a></li>
<li><a href="/contactus/"> Contact Us </a></li>
</ul>
</nav>
</body>
</html>

Create a file called sass_replace.scss with the below code:

$selector: selector-replace("a.class",".class",".class1");
#{$selector}{
font-size: 22px;
color:#FF4500;
font-style:italic;
background-color: #FFD700;
}

Execute the above files and it will create the sass_replace.css file with the below code:

a.class1 {
font-size: 22px;
color: #FF4500;
font-style: italic;
background-color: #FFD700;
}

Output:

  • Save the above given html code in sass_replace.html file.
  • Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.

replace() Function Example 4

5. Sass simple-selectors() Function

The function Simple-selectors) (generates a list of simple selectors in $selector. It displays a list of the selectors in individual selectors.

Syntax:

simple-selector (selectors)

The selectors parameter is a required parameter that defines the CSS selector.

Example

Create an HTML file called sass_simple_selector.html with the below code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Selector Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_simple_selector.css"/>
</head>
<body><br>
<div class="heading">
<p class="head"> Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals. </p>
</div>
<div class="heading1">
<p> It is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain. </p>
</div>
</body>
</html>

Create a file called sass_simple_selector.scss with the below code:

$selector: simple-selectors("div.head");
#{$selector}{
font-size: 22px;
color:#FF4500;
font-style:italic;
background-color: #FFD700;
}

Execute the above files and it will create the sass_ simple_selector.css file with the below code:

div, .head {
font-size: 22px;
color: #FF4500;
font-style: italic;
background-color: #FFD700;
}

Output:

  • Save the above given HTML code in sass_simple_selector.html file.
  • Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.

SASS Selectors Example 5

6. Sass selector-unify() Function

The function selector-unify() provides a selector that only matches elements specified by both $selector1 and $selector2.

Syntax:

simple-selector (selector1, selector2)
  • The selector1 parameter is a required parameter that defines the first CSS selector.
  • The selector2 parameter is a required parameter that defines the second CSS selector.

Example

Create an HTML file called sass_unify.html with the below code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Selector Functions Example </title>
<link rel="stylesheet" type="text/css" href="sass_unify.css"/>
</head>
<body><br>
<nav>
<ul>
<li><a href="/"> Home </a></li>
<li><a href="/aboutus/" class="active"> About Us </a></li>
<li><a href="/courses/"> Courses </a></li>
<li><a href="/contactus/" class="disabled"> Contact Us </a></li>
</ul>
</nav>
</body>
</html>

Create a file called sass_unify.scss with the below code:

$selector: selector-unify("a", ".disabled");
#{$selector}{
font-size: 20px;
color:#F4A460;
font-style:bold;
}

Execute the above files and it will create the sass_unify.css file with the below code:

a.disabled {
font-size: 20px;
color: #F4A460;
font-style: bold;
}

Output:

  • Save the above given HTML code in sass_unify.html file.
  • Now open the above HTML file in a browser, and you will see the below output as shown in the displayed image.

unify() Function Example 6

Conclusion

So far, we have studied about SASS selector functions which can be used to check and manipulate the selectors. The selectors are some of the pretty powerful features of the SASS pre-processor. The selectors are manipulated with other corresponding selectors. Try using with the different types of classes and values to play around with the selectors.

Recommended Articles

This is a guide to SASS Selectors. Here we discuss a brief overview on SASS Selectors function and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –

  1. SASS Mixins
  2. SASS Color Functions
  3. SASS @extend
  4. SASS Comments
quiz