Skip to content

Instantly share code, notes, and snippets.

@maddesigns
Created February 6, 2016 20:14
Show Gist options
  • Save maddesigns/a7b8b95190ebf580343c to your computer and use it in GitHub Desktop.
Save maddesigns/a7b8b95190ebf580343c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// global breakpoints
$tiny: 320px !default;
$small: 480px !default;
$medium: 600px !default;
$large: 768px !default;
$xlarge: 1024px,'no-query' true !default; // fallback for IE8
$xxlarge: 1280px !default;
$huge: 1600px !default;
// config/_breakpoints.scss
$breakpoints: (
'tiny': 320px,
'small': 480px,
'medium': 600px,
'large': 768px,
'xlarge': 1024px,
'xxlarge': 1280px,
'huge': 1600px
);
// config/_typography.scss
$text-sizing: (
'centi': (
'small': (
'font-size': 12px,
'line-height': 16px
)
),
'deci': (
'small': (
'font-size': 14px,
'line-height': 20px
)
),
'base': (
'small': (
'font-size': 16px,
'line-height': 26px
)
),
'deca': (
'small': (
'font-size': 18px,
'line-height': 26px
),
'large': (
'font-size': 20px,
'line-height': 30px
)
),
'h3': (
'small': (
'font-size': 22px,
'line-height': 28px
),
'large': (
'font-size': 24px,
'line-height': 32px
)
),
'h2': (
'small': (
'font-size': 24px,
'line-height': 32px
),
'large': (
'font-size': 28px,
'line-height': 36px
)
),
'h1': (
'small': (
'font-size': 24px,
'line-height': 32px
),
'xlarge': (
'font-size': 58px,
'line-height': 85px
)
)
);
// lib/functions/_responsive.scss
@function breakpoint($breakpoint-name) {
$breakpoint-value: map-get($breakpoints, $breakpoint-name);
@if $breakpoint-value {
@return $breakpoint-value;
}
@warn "Breakpoint '#{$breakpoint-name}' not found in $breakpoints";
}
// lib/functions/_typography.scss
@function text-breakpoints-for($text-size) {
$text-breakpoints: map-get($text-sizing, $text-size);
@if $text-breakpoints {
@return $text-breakpoints;
}
@warn "Text size '#{$text-size}' not found in $text-sizing";
}
@function text-properties-for($text-size, $breakpoint-name) {
$text-breakpoints: text-breakpoints-for($text-size);
$text-properties: map-get($text-breakpoints, $breakpoint-name);
@if $text-properties {
@return $text-properties;
}
@warn "Breakpoint '#{$breakpoint-name}' for text size '#{$text-size}' was not found";
}
// lib/mixins/_responsive.scss
@mixin respond-above($breakpoint-name) {
$breakpoint-value: breakpoint($breakpoint-name);
@if $breakpoint-value {
@media screen and (min-width: $breakpoint-value) {
@content;
}
}
}
// lib/mixins/_typography.scss
@mixin text-size($text-size, $breakpoint-name: 'small') {
$text-size-properties: text-properties-for($text-size, $breakpoint-name);
@if $text-size-properties {
font-size: map-get($text-size-properties, 'font-size');
line-height: map-get($text-size-properties, 'line-height');
}
}
@mixin responsive-text-size($text-size, $default-breakpoint: 'small') {
@include text-size($text-size, $default-breakpoint);
$text-breakpoints-map: text-breakpoints-for($text-size);
$text-breakpoints-keys: map-keys($text-breakpoints-map);
@each $breakpoint-name in $text-breakpoints-keys {
@if $breakpoint-name != $default-breakpoint {
@include respond-above($breakpoint-name) {
@include text-size($text-size, $breakpoint-name);
}
}
}
}
// _typography.scss
h1,
.text--mega {
@include responsive-text-size('mega');
}
h2,
.text--kilo {
@include responsive-text-size('kilo');
}
h3,
.text--hecto {
@include responsive-text-size('hecto');
}
h4,
.text--deca {
@include responsive-text-size('deca');
}
h5,
h6,
body,
.text--base {
@include responsive-text-size('base');
}
.text--deci {
@include responsive-text-size('deci');
}
small,
.text--centi {
@include responsive-text-size('centi');
}
Function text-breakpoints-for finished without @return
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment