Skip to content

Instantly share code, notes, and snippets.

@lukasborawski
Last active December 28, 2015 18:29
Show Gist options
  • Save lukasborawski/7543019 to your computer and use it in GitHub Desktop.
Save lukasborawski/7543019 to your computer and use it in GitHub Desktop.
Smooth SCSS @mixin generating notch and move for the element.
<!--
To change the value, change the number,
you may change the number of global shifts ($sft-o) and the number of its replication ($size).
-->
<!-- Usage for margins -->
<div class="shift_m_1 shift_m_hz-1 shift_m_vr-1"></div>
<!-- Usage for paddings -->
<div class="shift_p_1 shift_p_hz-1 shift_m_vr-1"></div>
[class*="shift"] {
$sft-o: 10px;
@mixin shift_types($types, $size, $val){
@each $type in $types {
@if $type == normal {
@for $i from 1 through $size {
&[class*="_#{$i}"]{ #{$val}: $sft-o * $i }
}
}
@if $type == horizontal {
@for $i from 1 through $size {
&[class*="_hz-#{$i}"]{ #{$val}: 0 $sft-o * $i }
}
}
@if $type == vertical {
@for $i from 1 through $size {
&[class*="_vr-#{$i}"]{ #{$val}: ($sft-o * $i) 0 }
}
}
}
}
&[class*="_m"]{
@include shift_types(normal horizontal vertical, 3, margin);
}
&[class*="_p"]{
@include shift_types(normal horizontal vertical, 3, padding);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment