Selector functions in Sass can help you build compound selectors in SassScript. In this recipe, you will learn how to use these functions.
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.
Here are the steps showing implementation of selector functions:
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);
Compile the Sass template from the previous step into CSS by running the following command in your console:
sass selectors.scss
After running the command from the second step, you will find the following CSS code in your console:
.test .child-test { width: 100%; }
In this recipe, as described in Chapter 3, Variables...