mixant de font-size responsive

This commit is contained in:
Raphael Goetter 2017-10-30 15:42:32 +01:00
parent 7426519638
commit 2862bbff9c
6 changed files with 99 additions and 23 deletions

View file

@ -1,3 +1,32 @@
// 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);
}
}
// Grid Mixin
// arguments are : columns number, gutter, min-breakpoint
// ex. .ingrid { @include grid(4, 1rem, 640px); }