Skip to content

Instantly share code, notes, and snippets.

@rusilko
Created October 5, 2014 10:18
Show Gist options
  • Save rusilko/c9d5f36241ace30d599a to your computer and use it in GitHub Desktop.
Save rusilko/c9d5f36241ace30d599a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
// Mixin approach
@mixin btn
{
min-width: 8rem;
font-family: "League Gothic";
text-align: center;
border-radius: 0.375em;
}
@mixin btn-large
{
padding: 0.375em;
font-size: 1.25rem;
}
@mixin btn-small
{
padding: 0.25em;
font-size: 1rem;
}
@mixin btn-red
{
color: red;
}
@mixin btn-black
{
color: black;
}
[type="submit"] {
@include btn;
@include btn-large;
@include btn-red;
}
[type="button"] {
@include btn;
@include btn-small;
@include btn-black;
}
//Extend approach
.btn
{
min-width: 8rem;
font-family: "League Gothic";
text-align: center;
border-radius: 0.375em;
}
.btn-large
{
padding: 0.375em;
font-size: 1.25rem;
}
.btn-small
{
padding: 0.25em;
font-size: 1rem;
}
.btn-red
{
color: red;
}
.btn-black
{
color: black;
}
[type="submit-e"] {
@extend .btn;
@extend .btn-large;
@extend .btn-red;
}
[type="button-e"] {
@extend .btn;
@extend .btn-small;
@extend .btn-black;
}
//Placeholder approach
%btn
{
min-width: 8rem;
font-family: "League Gothic";
text-align: center;
border-radius: 0.375em;
}
%btn-large
{
padding: 0.375em;
font-size: 1.25rem;
}
%btn-small
{
padding: 0.25em;
font-size: 1rem;
}
%btn-red
{
color: red;
}
%btn-black
{
color: black;
}
[type="submit-p"] {
@extend %btn;
@extend %btn-large;
@extend %btn-red;
}
[type="button-p"] {
@extend %btn;
@extend %btn-small;
@extend %btn-black;
}
.another-button {
@extend %btn;
@extend %btn-small;
}
[type="submit"] {
min-width: 8rem;
font-family: "League Gothic";
text-align: center;
border-radius: 0.375em;
padding: 0.375em;
font-size: 1.25rem;
color: red;
}
[type="button"] {
min-width: 8rem;
font-family: "League Gothic";
text-align: center;
border-radius: 0.375em;
padding: 0.25em;
font-size: 1rem;
color: black;
}
.btn, [type="submit-e"], [type="button-e"] {
min-width: 8rem;
font-family: "League Gothic";
text-align: center;
border-radius: 0.375em;
}
.btn-large, [type="submit-e"] {
padding: 0.375em;
font-size: 1.25rem;
}
.btn-small, [type="button-e"] {
padding: 0.25em;
font-size: 1rem;
}
.btn-red, [type="submit-e"] {
color: red;
}
.btn-black, [type="button-e"] {
color: black;
}
[type="submit-p"], [type="button-p"], .another-button {
min-width: 8rem;
font-family: "League Gothic";
text-align: center;
border-radius: 0.375em;
}
[type="submit-p"] {
padding: 0.375em;
font-size: 1.25rem;
}
[type="button-p"], .another-button {
padding: 0.25em;
font-size: 1rem;
}
[type="submit-p"] {
color: red;
}
[type="button-p"] {
color: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment