NestedSelectors

This extension lets you nest selectors within each other.

Usage

body
{
    color:#333;

    p {
        color:#555;
    }

    header {
        padding:20px;
    }
}

Will return:

body { color:#333; }
body p { color:#555; }
body header { padding:20px; }

Referencing the parent

There might be times when you need to reference the parent selector to do some more complex nesting:

body
{
   color:#333;
   & > header { padding:20px; }
}

Will return

body {color:#333;}
body > header { padding:20px; }

The & returns the current parent selector. This means you have access to more complex CSS selectors and you can create a single rule will all it’s sub-rules in a single selector.

Note: This extension will automatically remove all comments.

Settings

This extension has no settings.

Hooks

This extension has no hooks.