Skip to content

Instantly share code, notes, and snippets.

@airen
Created June 27, 2015 10:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save airen/2c964d9fbf976833b366 to your computer and use it in GitHub Desktop.
Save airen/2c964d9fbf976833b366 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
$breakpoints: (
small : 480px,
medium: 700px,
large : 1024px
);
$p-font-sizes: (
null : (15px, 1.3),
small : 16px,
medium: (17px, 1.4),
900px : 18px,
large : (19px, 1.45),
1440px: 20px,
);
@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint == null {
@include make-font-size($fs-font-size);
}
@else {
// If $fs-font-size is a key that exists in
// $fs-breakpoints, use the value
@if map-has-key($fs-breakpoints, $fs-breakpoint) {
$fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
}
@media screen and (min-width: $fs-breakpoint) {
@include make-font-size($fs-font-size);
}
}
}
}
// Utility function for mixin font-size
@mixin make-font-size($fs-font-size) {
// If $fs-font-size is a list, include
// both font-size and line-height
@if type-of($fs-font-size) == "list" {
font-size: nth($fs-font-size, 1);
@if (length($fs-font-size) > 1) {
line-height: nth($fs-font-size, 2);
}
}
@else {
font-size: $fs-font-size;
}
}
p {
@include font-size($p-font-sizes);
}
p {
font-size: 15px;
line-height: 1.3;
}
@media screen and (min-width: 480px) {
p {
font-size: 16px;
}
}
@media screen and (min-width: 700px) {
p {
font-size: 17px;
line-height: 1.4;
}
}
@media screen and (min-width: 900px) {
p {
font-size: 18px;
}
}
@media screen and (min-width: 1024px) {
p {
font-size: 19px;
line-height: 1.45;
}
}
@media screen and (min-width: 1440px) {
p {
font-size: 20px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment