Skip to content

Instantly share code, notes, and snippets.

@DevelopIntelligenceBoulder
Created December 4, 2015 21:51
Show Gist options
  • Save DevelopIntelligenceBoulder/c22ebf323ada58171255 to your computer and use it in GitHub Desktop.
Save DevelopIntelligenceBoulder/c22ebf323ada58171255 to your computer and use it in GitHub Desktop.
@import 'colors';
@import 'mixins';
section {
padding: 1em;
}
.color-1 {
color: $color1;
}
.color-2 {
color: $color2;
}
.color-3 {
color: $color3;
}
.color-4 {
color: $color4;
}
.class-1 {
@include base-button();
}
.class-2 {
@include base-button( $color2);
}
.class-3 {
@include base-button( $radius: 10px);
}
.class-4 {
@include base-button();
padding: 0 1em;
}
.alert {
border: 1px solid;
padding: 1em;
}
.other-style-1 {
@extend .alert;
background-color: rgba( $color1, 0.2);
color: $color1;
}
.other-style-2 {
@extend .alert;
background-color: rgba( $color2, 0.2);
color: $color2;
}
@DevelopIntelligenceBoulder
Copy link
Author

_mixins.scss

@mixin global-shadow() {
box-shadow: 1px 1px 3px rgba( black, 0.3);
}

@mixin base-button( $color: $color3, $text-color: white, $radius: 3px) {
background-color: $color;
background-image: linear-gradient( lighten( $color, 20%), darken( $color, 10%));
border: 1px solid darken( $color, 10%);
border-radius: $radius;
color: $text-color;
@include global-shadow();
line-height: 99em;
padding: 0 2em;
}

@DevelopIntelligenceBoulder
Copy link
Author

_colors.scss

$color1: red;
$color2: blue;
$color3: #FF69B4;
$color4: lighten( black, 5%);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment