KNACSS/sass/_config/_mixins.scss

73 lines
2.1 KiB
SCSS
Raw Normal View History

2017-10-30 15:42:32 +01:00
// font-size Mixin
// compiles to font-size-s + font-size-base on small-plus devices
// ex. h2 { @include font-size(h2);}
$font-sizes: (
base-size : $font-size-base,
base-size-s: $font-size-s,
h1-size : $h1-size,
h1-size-s : $h1-size-s,
h2-size : $h2-size,
h2-size-s : $h2-size-s,
h3-size : $h3-size,
h3-size-s : $h3-size-s,
h4-size : $h4-size,
h4-size-s : $h4-size-s,
h5-size : $h5-size,
h5-size-s : $h5-size-s,
h6-size : $h6-size,
h6-size-s : $h6-size-s
) !default;
@mixin font-size($elem) {
$base-size: #{$elem}-size;
$small-size: #{$elem}-size-s;
font-size: map-get($font-sizes, $small-size);
@include respond-to("small-up") {
font-size: map-get($font-sizes, $base-size);
}
}
2017-08-01 12:33:42 +02:00
// Grid Mixin
// arguments are : columns number, gutter, min-breakpoint
// ex. .ingrid { @include grid(4, 1rem, 640px); }
@mixin grid($number:1, $gutter:0, $breakpoint:0) {
@media (min-width: $breakpoint) {
display: grid;
grid-template-columns: repeat($number, 1fr);
grid-gap: $gutter;
}
}
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") {...}
2017-04-21 22:40:35 +02:00
$bp-aliases: (
2017-06-21 10:50:33 +02:00
'tiny' : (max-width: #{$tiny - 1}),
'small' : (max-width: #{$small - 1}),
'medium' : (max-width: #{$medium - 1}),
'large' : (max-width: #{$large - 1}),
'extra-large' : (max-width: #{$extra-large - 1}),
'tiny-up' : (min-width: #{$tiny}),
'small-up' : (min-width: #{$small}),
'medium-up' : (min-width: #{$medium}),
'large-up' : (min-width: #{$large}),
'extra-large-up' : (min-width: #{$extra-large}),
2017-04-21 22:40:35 +02:00
'retina' : (min-resolution: 2dppx)
);
// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
@mixin respond-to($name) {
// If the key exists in the map
@if map-has-key($bp-aliases, $name) {
// Prints a media query based on the value
@media #{inspect(map-get($bp-aliases, $name))} {
@content;
}
2016-09-21 10:05:29 +02:00
}
2017-04-21 22:40:35 +02:00
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Please make sure it is defined in `$breakpoints` map.";
2016-09-21 10:05:29 +02:00
}
}