Over a million developers have joined DZone.
Silver Partner

Sass Snippets: Using the Parent Selector

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with JetBrains. Produce high quality code with no additional effort, thanks to state-of-the-art code analysis, on-the-fly error prevention with PhpStorm.

 The Sass syntax has several useful extensions to CSS. One of them is the parent selector shortcut: &. We can use & in our style definition of a selector and Sass will replace it with the parent selector of the rules when the code is converted to CSS. If we use the parent selector (&) in nested rules the complete parent selector is first resolved and then used to replace &.

h1 {
    padding: 20px 0 10px 0;

    // & will be replaced with parent selector h1.
    &.pageHeader {
        color: #f7f7f7;
    }

    // & will be replaced with parent selector h1.
    body.main & {
        color: #ccc;
    }
}

// Parent selector can have a class or id.
a.first {
    text-decoration: none;

    // Parent selector works on pseudo-classes as well.
    &:hover {
        text-decoration: underline;
    }
}

body {
    .article {
        h1 {
            color: #7f7f7f;

            // In nested rules the parent selector is 
            // completely resolved before being used.
            // The complete parent selector here is
            // body .article h1.
            &.blog {
                font-weight: bold;
            }
        }

    }
}

The resulting CSS is in the following sample:

h1 {
  padding: 20px 0 10px 0;
}
h1.pageHeader {
  color: #f7f7f7;
}
body.main h1 {
  color: #ccc;
}

a.first {
  text-decoration: none;
}
a.first:hover {
  text-decoration: underline;
}

body .article h1 {
  color: #7f7f7f;
}
body .article h1.blog {
  font-weight: bold;
}

Written with Sass 3.2.5



The Web Dev Zone is brought to you in partnership with JetBrains. Streamline your workflow by integrating with everything you need for productive development with WebStorm.

Topics:

Published at DZone with permission of Hubert Klein Ikkink , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}