mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 09:57:35 +01:00
167 lines
5.1 KiB
Plaintext
167 lines
5.1 KiB
Plaintext
---
|
||
title: Parent Selector
|
||
introduction: >
|
||
The parent selector, `&`, is a special selector invented by Sass that’s used
|
||
in [nested selectors](../style-rules#nesting) to refer to the outer selector.
|
||
It makes it possible to re-use the outer selector in more complex ways, like
|
||
adding a
|
||
[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
|
||
or adding a selector *before* the parent.
|
||
---
|
||
|
||
When a parent selector is used in an inner selector, it's replaced with the corresponding outer selector. This happens instead of the normal nesting behavior.
|
||
|
||
{% codeExample 'parent-selector' %}
|
||
.alert {
|
||
// The parent selector can be used to add pseudo-classes to the outer
|
||
// selector.
|
||
&:hover {
|
||
font-weight: bold;
|
||
}
|
||
|
||
// It can also be used to style the outer selector in a certain context, such
|
||
// as a body set to use a right-to-left language.
|
||
[dir=rtl] & {
|
||
margin-left: 0;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
// You can even use it as an argument to pseudo-class selectors.
|
||
:not(&) {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
===
|
||
.alert
|
||
// The parent selector can be used to add pseudo-classes to the outer
|
||
// selector.
|
||
&:hover
|
||
font-weight: bold
|
||
|
||
|
||
// It can also be used to style the outer selector in a certain context, such
|
||
// as a body set to use a right-to-left language.
|
||
[dir=rtl] &
|
||
margin-left: 0
|
||
margin-right: 10px
|
||
|
||
|
||
// You can even use it as an argument to pseudo-class selectors.
|
||
:not(&)
|
||
opacity: 0.8
|
||
{% endcodeExample %}
|
||
|
||
{% headsUp %}
|
||
{% markdown %}
|
||
Because the parent selector could be replaced by a type selector like `h1`, it's only allowed at the beginning of compound selectors where a type selector would also be allowed. For example, `span&` is not allowed.
|
||
|
||
We're looking into loosening this restriction, though. If you'd like to help make that happen, check out [this GitHub issue][].
|
||
|
||
[this GitHub issue]: https://github.com/sass/sass/issues/1425
|
||
{% endmarkdown %}
|
||
{% endheadsUp %}
|
||
|
||
{% markdown %}
|
||
## Adding Suffixes
|
||
|
||
You can also use the parent selector to add extra suffixes to the outer
|
||
selector. This is particularly useful when using a methodology like [BEM][] that
|
||
uses highly structured class names. As long as the outer selector ends with an
|
||
alphanumeric name (like class, ID, and element selectors), you can use the
|
||
parent selector to append additional text.
|
||
|
||
[BEM]: http://getbem.com/
|
||
{% endmarkdown %}
|
||
|
||
{% codeExample 'parent-selector-suffixes' %}
|
||
.accordion {
|
||
max-width: 600px;
|
||
margin: 4rem auto;
|
||
width: 90%;
|
||
font-family: "Raleway", sans-serif;
|
||
background: #f4f4f4;
|
||
|
||
&__copy {
|
||
display: none;
|
||
padding: 1rem 1.5rem 2rem 1.5rem;
|
||
color: gray;
|
||
line-height: 1.6;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
|
||
&--open {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
===
|
||
.accordion
|
||
max-width: 600px
|
||
margin: 4rem auto
|
||
width: 90%
|
||
font-family: "Raleway", sans-serif
|
||
background: #f4f4f4
|
||
|
||
&__copy
|
||
display: none
|
||
padding: 1rem 1.5rem 2rem 1.5rem
|
||
color: gray
|
||
line-height: 1.6
|
||
font-size: 14px
|
||
font-weight: 500
|
||
|
||
&--open
|
||
display: block
|
||
{% endcodeExample %}
|
||
|
||
{% markdown %}
|
||
## In SassScript
|
||
|
||
The parent selector can also be used within SassScript. It's a special
|
||
expression that returns the current parent selector in the same format used by [selector functions][]: a comma-separated list (the selector list) that contains space-separated lists (the complex selectors) that contain unquoted strings (the compound selectors).
|
||
|
||
[selector functions]: ../../modules/selector#selector-values
|
||
{% endmarkdown %}
|
||
|
||
{% codeExample 'parent-selector-sassscript' %}
|
||
.main aside:hover,
|
||
.sidebar p {
|
||
parent-selector: &;
|
||
// => ((unquote(".main") unquote("aside:hover")),
|
||
// (unquote(".sidebar") unquote("p")))
|
||
}
|
||
===
|
||
.main aside:hover,
|
||
.sidebar p
|
||
parent-selector: &
|
||
// => ((unquote(".main") unquote("aside:hover")),
|
||
// (unquote(".sidebar") unquote("p")))
|
||
{% endcodeExample %}
|
||
|
||
{% markdown %}
|
||
If the `&` expression is used outside any style rules, it returns `null`. Since `null` is [falsey][], this means you can easily use it to determine whether a mixin is being called in a style rule or not.
|
||
|
||
[falsey]: ../../at-rules/control/if#truthiness-and-falsiness
|
||
{% endmarkdown %}
|
||
|
||
{% render 'code-snippets/example-if-parent-selector' %}
|
||
|
||
{% markdown %}
|
||
### Advanced Nesting
|
||
|
||
You can use `&` as a normal SassScript expression, which means you can pass it to functions or include it in interpolation—even in other selectors! Using it in combination with [selector functions][] and the [`@at-root` rule][] allows you to nest selectors in very powerful ways.
|
||
|
||
[selector functions]: ../../modules/selector#selector-values
|
||
[`@at-root` rule]: ../../at-rules/at-root
|
||
{% endmarkdown %}
|
||
|
||
{% render 'code-snippets/example-advanced-nesting' %}
|
||
|
||
{% headsUp %}
|
||
{% markdown %}
|
||
When Sass is nesting selectors, it doesn't know what interpolation was used to generate them. This means it will automatically add the outer selector to the inner selector *even if* you used `&` as a SassScript expression. That's why you need to explicitly use the [`@at-root` rule][] to tell Sass not to include the outer selector.
|
||
|
||
[`@at-root` rule]: ../../at-rules/at-root
|
||
{% endmarkdown %}
|
||
{% endheadsUp %}
|