Skip to content

Instantly share code, notes, and snippets.

@gise88
Last active August 1, 2017 00:48
Show Gist options
  • Save gise88/8d78661c3f11616cfcf395b1f3f50dec to your computer and use it in GitHub Desktop.
Save gise88/8d78661c3f11616cfcf395b1f3f50dec to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// ----
// https://www.sassmeister.com/gist/8d78661c3f11616cfcf395b1f3f50dec
// ----
$breakpoint-xxs: 500px;
$breakpoint-xs: 600px;
$breakpoint-sm: 768px;
$breakpoint-md: 990px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1600px;
$breakpoint-xxl: 1920px;
$breakpoints-definitions: (
(tiny, $breakpoint-xxs - 1, 'max-width:'),
(xxs, $breakpoint-xxs, 'min-width:'),
(xs, $breakpoint-xs, 'min-width:'),
(sm, $breakpoint-sm, 'min-width:'),
(md, $breakpoint-md, 'min-width:'),
(lg, $breakpoint-lg, 'min-width:'),
(xl, $breakpoint-xl, 'min-width:'),
(xxl, $breakpoint-xxl, 'min-width:')
);
$breakpoints: ();
@each $key, $val, $query in $breakpoints-definitions {
$breakpoints: append($breakpoints, ($key, (#{'('$query $val')'}))) !global;
}
$breakpoints-keys: ();
@each $key, $query in $breakpoints {
$breakpoints-keys: append($breakpoints-keys, $key, comma) !global;
}
@mixin set-breakpoints($property, $values) {
@if length($breakpoints) != length($values) {
@error '[ERROR] #{length($breakpoints)} values needed for: #{$breakpoints-keys}';
}
@each $key, $query in $breakpoints {
$index: index($breakpoints, ($key, $query));
// @error $index ($key $query) ($key, $query);
$val: nth($values, $index);
@if $val != null {
@media #{$query} {
#{$property}: #{$val};
}
}
}
}
.single-property {
color: blue;
@include set-breakpoints(padding, (null,null,0 3px,null,5px 30px,null,7px,null))
}
@mixin set-multi-breakpoints($properties, $values) {
@if length($properties) != length($values) {
@error '[ERROR] Length of $properties needs to be equal to the length of the $values';
}
@each $key, $query in $breakpoints {
@media #{$query} {
// @error $query;
$index: index($breakpoints, ($key, $query));
// @error $index;
@for $i from 1 through length($properties) {
@if length($breakpoints) != length(nth($values, $i)) {
@error '[ERROR] #{length($breakpoints)} values needed for: #{$breakpoints-keys}';
}
$val: nth(nth($values, $i), $index);
// @error $val;
@if $val != null {
#{nth($properties, $i)}: #{$val};
}
}
}
}
}
.multi-properties {
font-size: 3em;
@include set-multi-breakpoints((padding margin), (null,null,null,null,5px,6px,7px,null) (1px,null,null,null,5px,6px,null,null));
}
.single-property {
color: blue;
}
@media (min-width: 600px) {
.single-property {
padding: 0 3px;
}
}
@media (min-width: 990px) {
.single-property {
padding: 5px 30px;
}
}
@media (min-width: 1600px) {
.single-property {
padding: 7px;
}
}
.multi-properties {
font-size: 3em;
}
@media (max-width: 499px) {
.multi-properties {
margin: 1px;
}
}
@media (min-width: 990px) {
.multi-properties {
padding: 5px;
margin: 5px;
}
}
@media (min-width: 1200px) {
.multi-properties {
padding: 6px;
margin: 6px;
}
}
@media (min-width: 1600px) {
.multi-properties {
padding: 7px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment