Skip to content

Instantly share code, notes, and snippets.

@davilious

davilious/SassMeister-input-HTML.html

Last active August 29, 2015 14:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davilious/a87ccaf665219a12a2a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davilious/a87ccaf665219a12a2a1 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="icon-hola"></div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----
$default-icon-size: 16;
@function is-size-for-icon-valid($parent-width, $parent-height) {
@if $parent-width >= $default-icon-size and $parent-height >= $default-icon-size {
@return true;
} @else {
@return false;
}
}
// Mixin to embed icon as a placeholder
// @icon: the name of the icon
// @parent-width: [100%, 100px] set the width of the parent instead of the icon (16x16)
// @parent-height: [24%, 24px] set the height of the parent instead of the icon (16x16)
@mixin icon-sprite($icon,
$parent-width: false,
$parent-height: false) {
@extend .icon-#{$icon} !optional;
@if $parent-width != false or $parent-height != false {
@if is-size-for-icon-valid($parent-width, $parent-height) {
width: $parent-width !important;
height: $parent-height !important;
} @else {
@warning "One of the size you set is less than #{$default-icon-size}";
border: 1px solid red;
}
}
}
.icon-generic {
width: 16px;
height: 16px;
}
.icon-generic {
@include icon-sprite('icon-hola', 100%, 20px);
}
Raw
SassMeister-output.css
.icon-generic {
width: 16px;
height: 16px;
}
.icon-generic {
width: 100% !important;
height: 20px !important;
}
Raw
SassMeister-rendered.html
<div class="icon-hola"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment