danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-12-04 10:28:22 +01:00
Code Issues Packages Projects Releases Wiki Activity
4a38e3c003
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

502 B
Raw Blame History 

// 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;
}