Last active
May 17, 2018 10:14
-
-
Save LucasVilela/56c642c6696fb8ed34a9e116e94aa080 to your computer and use it in GitHub Desktop.
Creating spacing classes using Sass
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
// Using gulp-sass will create the helper classes mt-10 m-10 and m-sm-10 and responsives .xs-p-5 .sm-p-5 .md-p-5 .lg-p-5 .xl-p-5 | |
// change to false if its not imported into bootstrap | |
$use-bootstrap: false; | |
// margin and padding values array | |
$space-values: ( 5, 10, 15, 20, 30, 40, 50) !default; | |
// margin and padding shorthands | |
$space-prefixes: ( p: padding, pt: padding-top, pr: padding-right, pb: padding-bottom, pl: padding-left, m: margin, mt: margin-top, mr: margin-right, mb: margin-bottom, ml: margin-left, ) !default; | |
// change these values if its not imported into bootstrap | |
$grid-breakpoints-custom: ( // Extra small screen / phone | |
xs: 0, // Small screen / phone | |
sm: 480px, // Medium screen / tablet | |
md: 768px, // Large screen / desktop | |
lg: 960px, // Extra large screen / wide desktop | |
xl: 1280px) !default; | |
$breakpoints: $grid-breakpoints-custom; | |
@if $use-bootstrap { | |
$breakpoints: $grid-breakpoints; | |
} | |
// main function definition | |
@mixin make-space($values, $prefixes, $breakpoints) { | |
@each $breakpoint-name, | |
$breakpoint-value in $breakpoints { | |
// if xs value = 0, set it global without media queries | |
@if($breakpoint-value==0) { | |
@each $attr-short, | |
$attr-long in $prefixes { | |
@each $value in $values { | |
.#{$breakpoint-name}-#{$attr-short}-#{$value} { | |
#{$attr-long}: #{$value}#{'px'}; | |
} | |
} | |
} | |
} | |
// breakpoint values that not equal to 0 | |
@else { | |
@media screen and (min-width: $breakpoint-value) { | |
@each $attr-short, $attr-long in $prefixes { | |
@each $value in $values { | |
.#{$breakpoint-name}-#{$attr-short}-#{$value} { | |
#{$attr-long}: #{$value}#{'px'}; | |
} | |
} | |
} | |
} | |
} | |
} | |
} | |
@include make-space($space-values, $space-prefixes, $breakpoints); | |
$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100); // Adjust this to include the pixel amounts you need. | |
$sides: (top, bottom, left, right); // Leave this variable alone | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
.m#{str-slice($side, 0, 1)}-#{$space} { | |
margin-#{$side}: #{$space}px !important; | |
} | |
.p#{str-slice($side, 0, 1)}-#{$space} { | |
padding-#{$side}: #{$space}px !important; | |
} | |
} | |
} | |
@each $space in $spaceamounts { | |
.m-#{$space} { | |
margin: #{$space}px !important; | |
} | |
.p-#{$space} { | |
padding: #{$space}px !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment