Skip to content

Instantly share code, notes, and snippets.

@dre1080 dre1080/_mixins.scss
Last active Oct 10, 2018

Embed
What would you like to do?
Element UI Spacing Utilities
@mixin res($key, $map: $--breakpoints) {
// 循环断点Map,如果存在则返回
@if map-has-key($map, $key) {
@media only screen and #{inspect(map-get($map, $key))} {
@content;
}
} @else {
@warn "Undefeined points: `#{$map}`";
}
}
/*
Base:
p = padding
m = margin
Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
0 = none
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-sm[-and-(up|down)]
-md[-and-(up|down)]
-lg[-and-(up|down)]
-xl
Example:
.mt1-lg-and-down
.pv1-sm-and-up
.ma5-xl
.pb-3
*/
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $length in $--spacers {
.#{$abbrev}a#{$size} {
#{$prop}: $length !important;
}
.#{$abbrev}t#{$size},
.#{$abbrev}v#{$size} {
#{$prop}-top: $length !important;
}
.#{$abbrev}r#{$size},
.#{$abbrev}h#{$size} {
#{$prop}-right: $length !important;
}
.#{$abbrev}b#{$size},
.#{$abbrev}v#{$size} {
#{$prop}-bottom: $length !important;
}
.#{$abbrev}l#{$size},
.#{$abbrev}h#{$size} {
#{$prop}-left: $length !important;
}
}
}
@each $break-point-name, $value in $--breakpoints-spec {
@include res($break-point-name, $--breakpoints-spec) {
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $length in $--spacers {
.#{$abbrev}a#{$size}-#{$break-point-name} {
#{$prop}: $length !important;
}
.#{$abbrev}t#{$size}-#{$break-point-name},
.#{$abbrev}v#{$size}-#{$break-point-name} {
#{$prop}-top: $length !important;
}
.#{$abbrev}r#{$size}-#{$break-point-name},
.#{$abbrev}h#{$size}-#{$break-point-name} {
#{$prop}-right: $length !important;
}
.#{$abbrev}b#{$size}-#{$break-point-name},
.#{$abbrev}v#{$size}-#{$break-point-name} {
#{$prop}-bottom: $length !important;
}
.#{$abbrev}l#{$size}-#{$break-point-name},
.#{$abbrev}h#{$size}-#{$break-point-name} {
#{$prop}-left: $length !important;
}
}
}
}
}
$--size-base: 14px;
$--spacers: (
0: 0,
1: ($--size-base * .25),
2: ($--size-base * .5),
3: $--size-base,
4: ($--size-base * 2),
5: ($--size-base * 4),
6: ($--size-base * 8),
7: ($--size-base * 16),
);
$--sm: 576px;
$--md: 768px;
$--lg: 992px;
$--xl: 1200px;
$--breakpoints-spec: (
'sm-and-up' : (min-width: $--sm),
'sm': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
'sm-and-down': (max-width: $--md - 1),
'md-and-up' : (min-width: $--md),
'md': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
'md-and-down': (max-width: $--lg - 1),
'lg-and-up' : (min-width: $--lg),
'lg': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
'lg-and-down': (max-width: $--xl - 1),
'xl' : (min-width: $--xl)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.