Created
May 22, 2015 14:31
-
-
Save anatomic/eb094bffe476d3608e45 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.13) | |
| // Compass (v1.0.3) | |
| // ---- | |
| $base-line-height: 24px !default; | |
| $base-spacing-unit: $base-line-height!default; | |
| // Add spacing types | |
| $add-spacing-types: ( | |
| push: margin, | |
| soft: padding | |
| ) !default; | |
| // Remove spacing types | |
| $remove-spacing-types: ( | |
| flush: margin, | |
| hard: padding | |
| ) !default; | |
| // Spacing units | |
| $spacing-sizes: ( | |
| double : $base-spacing-unit * 2, | |
| two-thirds : $base-spacing-unit * 0.66666666, | |
| half : $base-spacing-unit / 2, | |
| third : $base-spacing-unit / 3, | |
| quarter : $base-spacing-unit / 4, | |
| sixth : $base-spacing-unit / 6 | |
| ) !default; | |
| // Define sides spacing can be applied | |
| $sides: top right bottom left ends sides !default; | |
| @mixin spacing-properties($property, $side, $amount) { | |
| @if $side == 'ends' { | |
| #{$property}-top: $amount!important; | |
| #{$property}-bottom: $amount!important; | |
| } @else if $side == 'sides' { | |
| #{$property}-left: $amount!important; | |
| #{$property}-right: $amount!important; | |
| } @else{ | |
| #{$property}-#{$side}: $amount !important; | |
| } | |
| } | |
| @mixin spacing-classes($type, $property, $amount, $size: null, $namespace: '') { | |
| $classname: str-insert(if($size == null, #{$type}, #{$type}-#{$size}), $namespace, 0); | |
| .#{$classname} { | |
| #{$property} : $amount!important; | |
| } | |
| @each $side in $sides { | |
| .#{$classname}--#{$side} { | |
| @include spacing-properties($property, $side, $amount); | |
| } | |
| } | |
| } | |
| @mixin spacing($namespace: '') { | |
| // Generate helper classes to remove spacing | |
| @each $spacing-type in map-keys($remove-spacing-types) { | |
| @include spacing-classes($spacing-type, map-get($remove-spacing-types, $spacing-type), 0, null, $namespace); | |
| } | |
| // Generate helper classes to add spacing | |
| @each $spacing-type in map-keys($add-spacing-types) { | |
| $spacing-property: map-get($add-spacing-types, $spacing-type); | |
| @include spacing-classes($spacing-type, $spacing-property, $base-spacing-unit, null, $namespace); | |
| @each $size in map-keys($spacing-sizes) { | |
| $spacing-amount: map-get($spacing-sizes, $size); | |
| @include spacing-classes($spacing-type, $spacing-property, $spacing-amount, $size, $namespace); | |
| } | |
| } | |
| } | |
| @include spacing(); |
This file contains hidden or 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
| .flush { | |
| margin: 0 !important; | |
| } | |
| .flush--top { | |
| margin-top: 0 !important; | |
| } | |
| .flush--right { | |
| margin-right: 0 !important; | |
| } | |
| .flush--bottom { | |
| margin-bottom: 0 !important; | |
| } | |
| .flush--left { | |
| margin-left: 0 !important; | |
| } | |
| .flush--ends { | |
| margin-top: 0 !important; | |
| margin-bottom: 0 !important; | |
| } | |
| .flush--sides { | |
| margin-left: 0 !important; | |
| margin-right: 0 !important; | |
| } | |
| .hard { | |
| padding: 0 !important; | |
| } | |
| .hard--top { | |
| padding-top: 0 !important; | |
| } | |
| .hard--right { | |
| padding-right: 0 !important; | |
| } | |
| .hard--bottom { | |
| padding-bottom: 0 !important; | |
| } | |
| .hard--left { | |
| padding-left: 0 !important; | |
| } | |
| .hard--ends { | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .hard--sides { | |
| padding-left: 0 !important; | |
| padding-right: 0 !important; | |
| } | |
| .push { | |
| margin: 24px !important; | |
| } | |
| .push--top { | |
| margin-top: 24px !important; | |
| } | |
| .push--right { | |
| margin-right: 24px !important; | |
| } | |
| .push--bottom { | |
| margin-bottom: 24px !important; | |
| } | |
| .push--left { | |
| margin-left: 24px !important; | |
| } | |
| .push--ends { | |
| margin-top: 24px !important; | |
| margin-bottom: 24px !important; | |
| } | |
| .push--sides { | |
| margin-left: 24px !important; | |
| margin-right: 24px !important; | |
| } | |
| .push-double { | |
| margin: 48px !important; | |
| } | |
| .push-double--top { | |
| margin-top: 48px !important; | |
| } | |
| .push-double--right { | |
| margin-right: 48px !important; | |
| } | |
| .push-double--bottom { | |
| margin-bottom: 48px !important; | |
| } | |
| .push-double--left { | |
| margin-left: 48px !important; | |
| } | |
| .push-double--ends { | |
| margin-top: 48px !important; | |
| margin-bottom: 48px !important; | |
| } | |
| .push-double--sides { | |
| margin-left: 48px !important; | |
| margin-right: 48px !important; | |
| } | |
| .push-two-thirds { | |
| margin: 16.0px !important; | |
| } | |
| .push-two-thirds--top { | |
| margin-top: 16.0px !important; | |
| } | |
| .push-two-thirds--right { | |
| margin-right: 16.0px !important; | |
| } | |
| .push-two-thirds--bottom { | |
| margin-bottom: 16.0px !important; | |
| } | |
| .push-two-thirds--left { | |
| margin-left: 16.0px !important; | |
| } | |
| .push-two-thirds--ends { | |
| margin-top: 16.0px !important; | |
| margin-bottom: 16.0px !important; | |
| } | |
| .push-two-thirds--sides { | |
| margin-left: 16.0px !important; | |
| margin-right: 16.0px !important; | |
| } | |
| .push-half { | |
| margin: 12px !important; | |
| } | |
| .push-half--top { | |
| margin-top: 12px !important; | |
| } | |
| .push-half--right { | |
| margin-right: 12px !important; | |
| } | |
| .push-half--bottom { | |
| margin-bottom: 12px !important; | |
| } | |
| .push-half--left { | |
| margin-left: 12px !important; | |
| } | |
| .push-half--ends { | |
| margin-top: 12px !important; | |
| margin-bottom: 12px !important; | |
| } | |
| .push-half--sides { | |
| margin-left: 12px !important; | |
| margin-right: 12px !important; | |
| } | |
| .push-third { | |
| margin: 8px !important; | |
| } | |
| .push-third--top { | |
| margin-top: 8px !important; | |
| } | |
| .push-third--right { | |
| margin-right: 8px !important; | |
| } | |
| .push-third--bottom { | |
| margin-bottom: 8px !important; | |
| } | |
| .push-third--left { | |
| margin-left: 8px !important; | |
| } | |
| .push-third--ends { | |
| margin-top: 8px !important; | |
| margin-bottom: 8px !important; | |
| } | |
| .push-third--sides { | |
| margin-left: 8px !important; | |
| margin-right: 8px !important; | |
| } | |
| .push-quarter { | |
| margin: 6px !important; | |
| } | |
| .push-quarter--top { | |
| margin-top: 6px !important; | |
| } | |
| .push-quarter--right { | |
| margin-right: 6px !important; | |
| } | |
| .push-quarter--bottom { | |
| margin-bottom: 6px !important; | |
| } | |
| .push-quarter--left { | |
| margin-left: 6px !important; | |
| } | |
| .push-quarter--ends { | |
| margin-top: 6px !important; | |
| margin-bottom: 6px !important; | |
| } | |
| .push-quarter--sides { | |
| margin-left: 6px !important; | |
| margin-right: 6px !important; | |
| } | |
| .push-sixth { | |
| margin: 4px !important; | |
| } | |
| .push-sixth--top { | |
| margin-top: 4px !important; | |
| } | |
| .push-sixth--right { | |
| margin-right: 4px !important; | |
| } | |
| .push-sixth--bottom { | |
| margin-bottom: 4px !important; | |
| } | |
| .push-sixth--left { | |
| margin-left: 4px !important; | |
| } | |
| .push-sixth--ends { | |
| margin-top: 4px !important; | |
| margin-bottom: 4px !important; | |
| } | |
| .push-sixth--sides { | |
| margin-left: 4px !important; | |
| margin-right: 4px !important; | |
| } | |
| .soft { | |
| padding: 24px !important; | |
| } | |
| .soft--top { | |
| padding-top: 24px !important; | |
| } | |
| .soft--right { | |
| padding-right: 24px !important; | |
| } | |
| .soft--bottom { | |
| padding-bottom: 24px !important; | |
| } | |
| .soft--left { | |
| padding-left: 24px !important; | |
| } | |
| .soft--ends { | |
| padding-top: 24px !important; | |
| padding-bottom: 24px !important; | |
| } | |
| .soft--sides { | |
| padding-left: 24px !important; | |
| padding-right: 24px !important; | |
| } | |
| .soft-double { | |
| padding: 48px !important; | |
| } | |
| .soft-double--top { | |
| padding-top: 48px !important; | |
| } | |
| .soft-double--right { | |
| padding-right: 48px !important; | |
| } | |
| .soft-double--bottom { | |
| padding-bottom: 48px !important; | |
| } | |
| .soft-double--left { | |
| padding-left: 48px !important; | |
| } | |
| .soft-double--ends { | |
| padding-top: 48px !important; | |
| padding-bottom: 48px !important; | |
| } | |
| .soft-double--sides { | |
| padding-left: 48px !important; | |
| padding-right: 48px !important; | |
| } | |
| .soft-two-thirds { | |
| padding: 16.0px !important; | |
| } | |
| .soft-two-thirds--top { | |
| padding-top: 16.0px !important; | |
| } | |
| .soft-two-thirds--right { | |
| padding-right: 16.0px !important; | |
| } | |
| .soft-two-thirds--bottom { | |
| padding-bottom: 16.0px !important; | |
| } | |
| .soft-two-thirds--left { | |
| padding-left: 16.0px !important; | |
| } | |
| .soft-two-thirds--ends { | |
| padding-top: 16.0px !important; | |
| padding-bottom: 16.0px !important; | |
| } | |
| .soft-two-thirds--sides { | |
| padding-left: 16.0px !important; | |
| padding-right: 16.0px !important; | |
| } | |
| .soft-half { | |
| padding: 12px !important; | |
| } | |
| .soft-half--top { | |
| padding-top: 12px !important; | |
| } | |
| .soft-half--right { | |
| padding-right: 12px !important; | |
| } | |
| .soft-half--bottom { | |
| padding-bottom: 12px !important; | |
| } | |
| .soft-half--left { | |
| padding-left: 12px !important; | |
| } | |
| .soft-half--ends { | |
| padding-top: 12px !important; | |
| padding-bottom: 12px !important; | |
| } | |
| .soft-half--sides { | |
| padding-left: 12px !important; | |
| padding-right: 12px !important; | |
| } | |
| .soft-third { | |
| padding: 8px !important; | |
| } | |
| .soft-third--top { | |
| padding-top: 8px !important; | |
| } | |
| .soft-third--right { | |
| padding-right: 8px !important; | |
| } | |
| .soft-third--bottom { | |
| padding-bottom: 8px !important; | |
| } | |
| .soft-third--left { | |
| padding-left: 8px !important; | |
| } | |
| .soft-third--ends { | |
| padding-top: 8px !important; | |
| padding-bottom: 8px !important; | |
| } | |
| .soft-third--sides { | |
| padding-left: 8px !important; | |
| padding-right: 8px !important; | |
| } | |
| .soft-quarter { | |
| padding: 6px !important; | |
| } | |
| .soft-quarter--top { | |
| padding-top: 6px !important; | |
| } | |
| .soft-quarter--right { | |
| padding-right: 6px !important; | |
| } | |
| .soft-quarter--bottom { | |
| padding-bottom: 6px !important; | |
| } | |
| .soft-quarter--left { | |
| padding-left: 6px !important; | |
| } | |
| .soft-quarter--ends { | |
| padding-top: 6px !important; | |
| padding-bottom: 6px !important; | |
| } | |
| .soft-quarter--sides { | |
| padding-left: 6px !important; | |
| padding-right: 6px !important; | |
| } | |
| .soft-sixth { | |
| padding: 4px !important; | |
| } | |
| .soft-sixth--top { | |
| padding-top: 4px !important; | |
| } | |
| .soft-sixth--right { | |
| padding-right: 4px !important; | |
| } | |
| .soft-sixth--bottom { | |
| padding-bottom: 4px !important; | |
| } | |
| .soft-sixth--left { | |
| padding-left: 4px !important; | |
| } | |
| .soft-sixth--ends { | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| } | |
| .soft-sixth--sides { | |
| padding-left: 4px !important; | |
| padding-right: 4px !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment