Skip to content

Instantly share code, notes, and snippets.

@iamkirkbater
Last active Dec 29, 2015
Embed
What would you like to do?
Mixins I commonly use.
@mixin font-smoothing($value: on) {
@if $value == on {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@else {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
}
@function lower-bound($range) {
@if length($range) <= 0 {
@return 0;
}
@return nth($range, 1);
}
@function upper-bound($range) {
@if length($range) < 2 {
@return 999999999999;
}
@return nth($range, 2);
}
@mixin between($min, $max) {
@media (min-width: #{$min}) and (max-width: #{$max}) { @content }
}
@mixin min($size) {
@include mq((min-width: #{$size})) { @content }
}
@mixin max($size) {
@include mq((max-width: #{$size})) { @content }
}
@mixin grid-row() {
@include outer-container();
@include pad(0 $gutter/2);
}
@mixin collapse-right() {
padding-right: 0;
}
@mixin collapse-left() {
padding-left: 0;
}
@mixin collapse() {
@include collapse-left();
@include collapse-right();
}
@mixin zero() {
padding: 0;
margin: 0;
}
@mixin plr($pad) {
padding-left: $pad;
padding-right: $pad;
}
@mixin ptb($pad) {
padding-top: $pad;
padding-bottom: $pad;
}
@mixin mlr($pad) {
margin-left: $pad;
margin-right: $pad;
}
@mixin mtb($pad) {
margin-left: $pad;
margin-right: $pad;
}
@mixin button($rest-color, $hover-color: $rest-color) {
background-color: $rest-color;
border-radius: 0;
color: #fff;
display: inline-block;
font-size: 1em;
line-height: 1;
padding: .75em 1em;
text-decoration: none;
@include font-smoothing(on);
@include transition(background-color 200ms ease);
&:hover {
background-color: $hover-color;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment