Skip to content

Instantly share code, notes, and snippets.

@roatnek

roatnek/_mixin-pseudo-elem-icon.scss

Created March 16, 2017 01:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roatnek/7aa45a3a3687a3eb635e4eee125a1349 to your computer and use it in GitHub Desktop.
Save roatnek/7aa45a3a3687a3eb635e4eee125a1349 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_mixin-pseudo-elem-icon.scss
@mixin pseudo-elem-icon($width, $height, $image) {
content: "";
width: $width;
height: $height;
display: inline-block;
background: url($image) no-repeat 0 0;
background-size: contain;
}
// Usage
//
// HTML:
// <a href="/" class="back-button">Back</a>
//
// SCSS:
// .back-button {
// &:before {
// @include pseudo-elem-icon(10px, 10px, "/assets/img/common/arrow-back.svg");
// margin-right: 0.5em;
// }
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment