-
-
Save jasonhwest/9606313 to your computer and use it in GitHub Desktop.
Collection of SCSS mixins
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Use @include colorize('image.png', red, 0.5) | |
@mixin colorize($image, $color, $opacity) { | |
background: $color; | |
$color: transparentize($color, 1 - $opacity); | |
background: -webkit-linear-gradient(left, $color, $color), url($image); | |
background: -moz-linear-gradient(left, $color, $color), url($image); | |
background: -ms-linear-gradient(left, $color, $color), url($image); | |
background: -o-linear-gradient(left, $color, $color), url($image); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ============================================================================= | |
// Modernizr mixin | |
// | |
// Table of contents: | |
// 1. Modernizr mixin | |
// 1.1 Generate placholder name and selectors | |
// 1.2 Define placholder and print @content | |
// 1.3 Define feature selector and extend the placeholder | |
// 2. Aliases | |
// 2.1 Yep alias | |
// 2.2 Nope alias | |
// 3. Demo | |
// | |
// Usage: | |
// .my-selector { | |
// @include yep($features) { ... } | |
// @include nope($features) { ... { | |
// } | |
// | |
// ============================================================================= | |
// ============================================================================= | |
// 1. Modernizr mixin | |
// ============================================================================= | |
@mixin modernizr($features, $supports) { | |
$everything-okay: true; | |
// Use the 'no-' prefix if checking for unsuported features (e.g. `.no-translate3d`) | |
$prefix: if($supports, '', 'no-'); | |
// Features selector | |
// a) create a string if checking for supported features. We'll concatenate class names later on (e.g. `.translate3d.opacity selector`) | |
// b) create a list if checking for unsuported features. We'll append the class names later on (e.g. `.no-js selector, .no-translate3d selector`) | |
$selector: if($supports, '', (unquote('.no-js'))); | |
// The placeholder (e.g. `%yep-translate3d` or `%nope-opacity`) | |
$placeholder: if($supports, '%yep', '%nope'); | |
// 1.1 Generate placeholder and selectors | |
// ===================================== | |
@each $feature in $features { | |
// Making sure $feature is a string | |
@if type-of($feature) != string { | |
$everything-okay: false; | |
@warn '`#{$feature} is not a string for `modernizr`'; | |
} @else { | |
// Add feature name to the placeholder string (e.g. '%yep' + '-' + 'translate3d' or '%nope' + '-' + 'translate3d') | |
$placeholder: $placeholder + '-' + $feature; | |
// Define the new selector string (e.g. `.translate3d` or `.no-translate3d`) | |
$new-selector: #{'.' + $prefix + $feature}; | |
// Append the new selector | |
// a) to the string if yep (e.g. `.translate3d.opacity`) | |
// b) to the list if nope (e.g. `.no-translate3d, .no-opacity`) | |
$selector: if($supports, $selector + $new-selector, append($selector, $new-selector, comma)); | |
} | |
} | |
@if $everything-okay == true { | |
// 1.2 Define the placholder and print @content | |
// ===================================== | |
#{$placeholder} & { | |
@content; | |
} | |
// 1.3 Define feature selector(s) and extend the placeholder | |
// ===================================== | |
@at-root #{$selector} { | |
@extend #{$placeholder}; | |
} | |
} | |
} | |
// ============================================================================= | |
// 2. Aliases | |
// ============================================================================= | |
// 2.1 Yep alias | |
// ===================================== | |
@mixin yep($features) { | |
@include modernizr($features, $supports: true) { | |
@content; | |
} | |
} | |
// 2.2 Nope alias | |
// ===================================== | |
@mixin nope($features) { | |
@include modernizr($features, $supports: false) { | |
@content; | |
} | |
} | |
// ============================================================================= | |
// 3. Demo | |
// ============================================================================= | |
// Uncoment the code below and check the generated css output | |
// .my-selector { | |
// @include yep(translate3d opacity) { | |
// opacity: 0; | |
// transform: translateY(100%); | |
// } | |
// @include nope(translate3d opacity) { | |
// position: relative; | |
// top: 100%; | |
// display: none; | |
// } | |
// } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@function blockytextshadows($positions, $shadows) { | |
$x: 0; | |
$y: 0; | |
$x-delta: 0; | |
$y-delta: 0; | |
$output: null; | |
$currentwidth: 1; | |
$shadows-count: length($shadows); | |
@each $position in $positions { | |
@if($position == left){ | |
$x-delta: -1; | |
} @else if $position == right { | |
$x-delta: 1; | |
} @else if $position == top { | |
$y-delta: -1; | |
} @else if $position == bottom { | |
$y-delta: 1; | |
} | |
} | |
@for $i from 1 through $shadows-count { | |
$shadow: nth($shadows, $i); | |
$color: nth($shadow, 1); | |
$count: nth($shadow, 2); | |
@for $i from $currentwidth to ($currentwidth + $count) { | |
$x: $x + $x-delta; | |
$y: $y + $y-delta; | |
$shadowvalue: #{$color} #{$x}px #{$y}px 1px; | |
@if $output == null { | |
$output: $shadowvalue; | |
} @else { | |
$output: join($output, $shadowvalue, comma); | |
} | |
} | |
$currentwidth: $currentwidth + $count; | |
} | |
@return unquote($output); | |
} | |
// Tests & Usage reference | |
// blockytextshadows(direction, [color number-of-times-to-repeat-color]+); | |
/* body { | |
text-shadow: blockytextshadows(left top, (#fff 1, #000 5)); | |
text-shadow: blockytextshadows(right top, (#fff 1, #000 5)); | |
text-shadow: blockytextshadows(top left, (#fff 1, #000 5)); | |
text-shadow: blockytextshadows(top, (#fff 1, #000 5)); | |
text-shadow: blockytextshadows(bottom, (#fff 1, #000 5)); | |
text-shadow: blockytextshadows(left, (#fff 1, #000 5)); | |
text-shadow: blockytextshadows(right, (#fff 1, #000 5)); | |
text-shadow: blockytextshadows(right, (#fff 5, #000 2, #ddd 3)); | |
} | |
*/ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Use @include remfallback('margin-left', 2); | |
@mixin remfallback($property, $value) { | |
#{$property}: $value * 16px; | |
#{$property}: #{$value}rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment