Selector functions

Selector functions in Sass can help you build compound selectors in SassScript. In this recipe, you will learn how to use these functions.

Getting ready

Read the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, to find out how to install Ruby Sass and compile your Sass templates into CSS code.

How to do it....

Here are the steps showing implementation of selector functions:

1. Create a Sass template called selectors.scss. Write the following SCSS into this file:

    @mixin selector($selector) {
   
     .#{$selector} {
       #{selector-append('.child-', $selector)} {
         width: 100%;
       }
     }
   
   }
   
   @include selector(test);

2. Compile the Sass template from the previous step into CSS by running the following command in your console:

   sass selectors.scss
   

3. After running the command from the second step, you will find the following CSS code in your console:

    .test .child-test {
     width: 100%; }

How it works...

In this recipe, as described in Chapter 3, Variables...