Skip to content

Instantly share code, notes, and snippets.

@johngerome

johngerome/SassMeister-input-HTML.html

Last active August 29, 2015 14:06
Show Gist options
  • Save johngerome/24e818904f6e29f12fa0 to your computer and use it in GitHub Desktop.
Save johngerome/24e818904f6e29f12fa0 to your computer and use it in GitHub Desktop.
Download ZIP
CLEANER WAY ON EXTENDING MULTIPLE PLACEHOLDERS (a.k.a Silent Classes) : Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="btn-default">Default</div>
<div class="btn-default--flat">Flat</div>
<div class="btn-default--circle">Circle</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
// CLEANER WAY ON EXTENDING MULTIPLE PLACEHOLDERS (a.k.a Silent Classes)
%btn {
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #EEE;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FBFBFB), color-stop(100%, #E1E1E1));
background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -webkit-linear-gradient(top, #FBFBFB, #E1E1E1);
background: linear-gradient(to bottom, #FBFBFB, #E1E1E1);
display: inline-block;
vertical-align: middle;
border: 1px solid #D4D4D4;
height: 32px;
line-height: 32px;
padding: 0px 25.6px;
font-weight: 300;
font-size: 14px;
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #666;
text-shadow: 0 1px 1px #FFF;
margin: 0;
text-decoration: none;
text-align: center;
}
%btn-flat{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-transition-property: background;
-o-transition-property: background;
-webkit-transition-property: background;
transition-property: background;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #EEE;
border: none;
text-shadow: none;
}
%btn-circle{
-moz-border-radius: 240px;
-webkit-border-radius: 240px;
border-radius: 240px;
-moz-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
width: 120px;
line-height: 120px;
height: 120px;
padding: 0px;
border-width: 4px;
font-size: 19px;
}
// Extend Multiple Placeholders
// @param {list} $args - list of placeholder to extend
@mixin extend($args:()){
@each $p in $args {
@extend %#{$p} !optional;
}
}
.btn-default {
@include extend(( btn ));
}
.btn-default--flat {
@include extend(( btn btn-flat ));
}
.btn-default--circle {
@include extend(( btn btn-circle ));
}
Raw
SassMeister-output.css
@charset "UTF-8";
.btn-default, .btn-default--flat, .btn-default--circle {
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #EEE;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FBFBFB), color-stop(100%, #E1E1E1));
background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -webkit-linear-gradient(top, #FBFBFB, #E1E1E1);
background: linear-gradient(to bottom, #FBFBFB, #E1E1E1);
display: inline-block;
vertical-align: middle;
border: 1px solid #D4D4D4;
height: 32px;
line-height: 32px;
padding: 0px 25.6px;
font-weight: 300;
font-size: 14px;
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #666;
text-shadow: 0 1px 1px #FFF;
margin: 0;
text-decoration: none;
text-align: center;
}
.btn-default--flat {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-transition-property: background;
-o-transition-property: background;
-webkit-transition-property: background;
transition-property: background;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #EEE;
border: none;
text-shadow: none;
}
.btn-default--circle {
-moz-border-radius: 240px;
-webkit-border-radius: 240px;
border-radius: 240px;
-moz-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
width: 120px;
line-height: 120px;
height: 120px;
padding: 0px;
border-width: 4px;
font-size: 19px;
}
Raw
SassMeister-rendered.html
<div class="btn-default">Default</div>
<div class="btn-default--flat">Flat</div>
<div class="btn-default--circle">Circle</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment