Skip to content

Instantly share code, notes, and snippets.

@camflan
Created October 28, 2015 19:20
Show Gist options
  • Save camflan/b836e29f87c3bf88d8ed to your computer and use it in GitHub Desktop.
Save camflan/b836e29f87c3bf88d8ed to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
$type-scale: (
-15:0.066667rem,
-10:0.186rem,
-9:0.211rem,
-8:0.26rem,
-7:0.295rem,
-6:0.364rem,
-5:0.413rem,
-4:0.51rem,
-3:0.578rem,
-2:0.714rem,
-1:0.809rem,
0:1rem,
1:1.133rem,
2:1.4rem,
3:1.586rem,
4:1.96rem,
5:2.221rem,
6:2.744rem,
7:3.109rem,
8:3.842rem,
9:4.353rem,
10:5.378rem,
11:6.094rem,
12:7.53rem,
13:8.531rem,
14:10.541rem,
15:11.943rem,
16:14.758rem
);
@function get-size($size) {
@if map-has-key($type-scale, $size) {
@debug $type-scale;
@debug $size + " => " + map-get($type-scale, $size);
@return map-get($type-scale, $size);
}
@warn "Not a valid size.";
@return null;
}
@function scale-size($rem-size, $steps) {
$size-key: get-key-for-value($type-scale, $rem-size);
@if $size-key {
@debug "HERE";
$new-size: $size-key + $steps;
@return get-size($new-size);
}
@warn "Not able to find size for " + $rem-size;
@return null;
}
@function get-key-for-value($map, $value) {
@each $map-key, $map-value in $map {
@if $map-value == $value {
@return $map-key
}
}
@warn $value + " not found in " + $map;
@return null;
}
$h1-font-size: get-size(5);
h1 {
font-size: $h1-font-size;
small {
font-size: scale-size($h1-font-size, -2);
color: red;
}
}
h1 {
font-size: 2.221rem;
}
h1 small {
font-size: 1.586rem;
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment