KNACSS/sass/_config/_mixins.scss

45 lines
1.1 KiB
SCSS
Raw Normal View History

2016-09-21 10:05:29 +02:00
// Additionnal "utility" breakpoints aliases
2016-12-01 15:45:23 +01:00
// ex. @include respond-to("medium-up") {...}
2016-09-21 10:05:29 +02:00
@function breakpoint($bp) {
2016-12-01 15:45:23 +01:00
@if $bp == 'tiny' {
2016-09-21 10:05:29 +02:00
@return '(max-width: #{$tiny})';
}
2016-12-01 15:45:23 +01:00
@else if $bp == 'small' {
@return '(max-width: #{$small})';
2016-09-21 10:05:29 +02:00
}
2016-12-01 15:45:23 +01:00
@else if $bp == 'medium' {
@return '(max-width: #{$medium})';
2016-09-21 10:05:29 +02:00
}
2016-12-01 15:45:23 +01:00
@else if $bp == 'large' {
@return '(max-width: #{$large})';
2016-09-21 10:05:29 +02:00
}
2016-12-01 15:45:23 +01:00
@else if $bp == 'extra-large' {
@return '(max-width: #{$extra-large})';
2016-09-21 10:05:29 +02:00
}
2016-12-01 15:45:23 +01:00
@else if $bp == 'tiny-up' {
2016-09-21 10:05:29 +02:00
@return '(min-width: #{$tiny + 1})';
}
2016-12-01 15:45:23 +01:00
@else if $bp == 'small-up' {
2016-09-21 10:05:29 +02:00
@return '(min-width: #{$small + 1})';
}
2016-12-01 15:45:23 +01:00
@else if $bp == 'medium-up' {
@return '(min-width: #{$medium + 1})';
}
@else if $bp == 'large-up' {
@return '(min-width: #{$large + 1})';
}
@else if $bp == 'extra-large-up' {
@return '(min-width: #{$extra-large + 1})';
}
2016-09-21 10:05:29 +02:00
@else if $bp == 'retina' {
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
}
}
@mixin respond-to($value) {
$string: breakpoint($value);
@media screen and #{$string} {
@content;
}
}