Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // 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;
- }
- }
Add Comment
Please, Sign In to add comment