mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 09:57:35 +01:00
63 lines
1.5 KiB
Plaintext
63 lines
1.5 KiB
Plaintext
|
---
|
||
|
|
title: Placeholder Selectors
|
||
|
|
---
|
||
|
|
|
||
|
|
Sass has a special kind of selector known as a "placeholder". It looks and acts
|
||
|
|
a lot like a class selector, but it starts with a `%` and it's not included in
|
||
|
|
the CSS output. In fact, any complex selector (the ones between the commas) that
|
||
|
|
even *contains* a placeholder selector isn't included in the CSS, nor is any
|
||
|
|
style rule whose selectors all contain placeholders,
|
||
|
|
|
||
|
|
<%= partial "code-snippets/example-placeholder" %>
|
||
|
|
|
||
|
|
What's the use of a selector that isn't emitted? It can still be [extended][]!
|
||
|
|
Unlike class selectors, placeholders don't clutter up the CSS if they aren't
|
||
|
|
extended and they don't mandate that users of a library use specific class names
|
||
|
|
for their HTML.
|
||
|
|
|
||
|
|
[extended]: ../at-rules/extend
|
||
|
|
|
||
|
|
<% example do %>
|
||
|
|
%toolbelt {
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-top: 1px rgba(#000, .12) solid;
|
||
|
|
padding: 16px 0;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
&:hover { border: 2px rgba(#000, .5) solid; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-buttons {
|
||
|
|
@extend %toolbelt;
|
||
|
|
color: #4285f4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.reset-buttons {
|
||
|
|
@extend %toolbelt;
|
||
|
|
color: #cddc39;
|
||
|
|
}
|
||
|
|
===
|
||
|
|
%toolbelt
|
||
|
|
box-sizing: border-box
|
||
|
|
border-top: 1px rgba(#000, .12) solid
|
||
|
|
padding: 16px 0
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
border: 2px rgba(#000, .5) solid
|
||
|
|
|
||
|
|
.action-buttons
|
||
|
|
@extend %toolbelt
|
||
|
|
color: #4285f4
|
||
|
|
|
||
|
|
|
||
|
|
.reset-buttons
|
||
|
|
@extend %toolbelt
|
||
|
|
color: #cddc39
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
Placeholder selectors are useful when writing a Sass library where each style
|
||
|
|
rule may or may not be used. As a rule of thumb, if you're writing a stylesheet
|
||
|
|
just for your own app, it's often better to just extend a class selector if one
|
||
|
|
is available.
|