Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<button>Button</button>
<input type="submit" />
<div class="btn">Bootstrap Button</div>
<div class="button">.button Button</div>
<div class="callout">
<button>Button</button>
<input type="submit" />
<div class="btn">Bootstrap Button</div>
<div class="button">.button Button</div>
</div>
// ----
// libsass (v3.2.5)
// ----
/* test sassmeister for https://github.com/r4j4h/jasmine-scss-example */
// file a
// mixins that contain selectors where the only rules are extend directives for placeholder selectors
@mixin define-button-tag() {
button,
input[type="button"],
input[type="submit"] {
@extend %button;
}
}
@mixin define-button-generic() {
.button {
@extend %button;
}
}
@mixin define-button-bootstrap() {
.btn {
@extend %button;
}
}
@mixin define-callout-generic() {
.callout {
@extend %callout;
}
}
// file b
// defines placeholder selectors and styles them
/* No styles have been output yet :) */
$primary-text-color: #333;
$primary-color: #eeaabb;
$primary-shadow-color: #dd99aa;
$primary-highlight-color: #ffbbcc;
@mixin silly-button($fontColor, $bgColor, $bgHighlightColor, $bgShadowColor) {
font: bold 11px Arial;
text-decoration: none;
background-color: $bgColor;
color: $fontColor;
padding: 2px 6px 2px 6px;
border-top: 1px solid $bgHighlightColor;
border-right: 1px solid $bgShadowColor;
border-bottom: 1px solid $bgShadowColor;
border-left: 1px solid $bgHighlightColor;
&:active {
background-color: darken($bgColor, 20%);
}
}
%button {
color: orange;
margin: 1em;
@include silly-button(
$primary-text-color,
$primary-color,
$primary-highlight-color,
$primary-shadow-color
);
}
%callout {
border: 1px solid orange;
background: orange;
}
%callout {
padding: 1em;
%button {
color: red;
margin: 0;
}
}
/* End of output */
// This hooks into the component interfaces..
// ...try (un)commenting these :)
@include define-button-tag();
@include define-button-generic();
//@include define-button-bootstrap();
@include define-callout-generic();
// Also order of these does not matter in "file b"
/* test sassmeister for https://github.com/r4j4h/jasmine-scss-example */
/* No styles have been output yet :) */
button,
input[type="button"],
input[type="submit"], .button {
color: orange;
margin: 1em;
font: bold 11px Arial;
text-decoration: none;
background-color: #eeaabb;
color: #333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #ffbbcc;
border-right: 1px solid #dd99aa;
border-bottom: 1px solid #dd99aa;
border-left: 1px solid #ffbbcc;
}
button:active,
input[type="button"]:active,
input[type="submit"]:active, .button:active {
background-color: #dd5577;
}
.callout {
border: 1px solid orange;
background: orange;
}
.callout {
padding: 1em;
}
.callout button, .callout input[type="button"], .callout input[type="submit"], .callout .button {
color: red;
margin: 0;
}
/* End of output */
<button>Button</button>
<input type="submit" />
<div class="btn">Bootstrap Button</div>
<div class="button">.button Button</div>
<div class="callout">
<button>Button</button>
<input type="submit" />
<div class="btn">Bootstrap Button</div>
<div class="button">.button Button</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment