sass-site/source/code-snippets/_homepage-extend-scss.md
Ashley Kolodziej b8d1399aa5 Use placeholders in extend documentation (#193)
* Update snippets to use placeholder class

* Update docs text with placeholder reference

* Additional edits for clarity in how this works

* Add non extended placeholder example
2017-10-30 14:27:16 -07:00

34 lines
502 B
Markdown

```scss
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
// This CSS will print because %message-shared is extended.
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
```