Skip to content

Instantly share code, notes, and snippets.

@Anenth
Last active Aug 29, 2015
Embed
What would you like to do?
Useful Sass mixins
// 1. BEM Mixin
@mixin e($name) {
@at-root &__#{$name} {
@content;
}
}
//modifiers get appended with "--" and the $name
@mixin m($name) {
@at-root &--#{$name} {
@content;
}
}
// 2. Size
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
// 3. Positions
@mixin position($position, $args) {
@each $o in top right bottom left {
$i: index($args, $o);
@if $i
and $i + 1 <= length($args)
and type-of( nth($args, $i + 1) ) == number {
#{$o}: nth($args, $i + 1);
}
}
position: $position;
}
@mixin absolute($args) {
@include position(absolute, $args);
}
// 4. Triangle
@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
@if not index(top right bottom left, $direction) {
@warn "Direction must be one of top, right, bottom or left.";
}
@else {
@include absolute($position); // Position
@include size(0); // Size
content: '';
z-index: 2;
// This require compass
border-#{opposite-position($direction)}: $size * 1.5 solid $color;
$perpendicular-borders: $size solid transparent;
@if $direction == top or $direction == bottom {
border-left: $perpendicular-borders;
border-right: $perpendicular-borders;
}
@else if $direction == right or $direction == left {
border-bottom: $perpendicular-borders;
border-top: $perpendicular-borders;
}
}
}
// 5. Import mixin
$modules: () !default;
@mixin exports($name) {
@if (not index($modules, $name)) {
$modules: append($modules, $name) !global;
@content;
}
}
// 6. Element offset
@mixin element-invisible {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
@mixin element-invisible-off {
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
}
// 7. Hover Active Focus state mixin
@mixin hover-active-focus($property, $value) {
&:hover, &:active, &:focus {
#{$property}: $value;
}
}
// 8. Retina mixin
@mixin imgRetina($image, $extension, $width, $height) {
background: url($image + '.' + $extension) no-repeat;
width: $width;
height: $height;
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background-image: url($image + '-2x' + '.' + $extension) no-repeat;
background-size: $width $height;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment