Created
November 28, 2015 23:36
-
-
Save pierreburel/2b10f9fa5495fb8941da to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Test</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
$rem-baseline: 10px !default; | |
$rem-fallback: true !default; | |
$rem-px-only: false !default; | |
// list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function) | |
@function rem-separator($list) { | |
@if function-exists("list-separator") == true { | |
@return list-separator($list); | |
} | |
$test-list: (); | |
@each $item in $list { | |
$test-list: append($test-list, $item, space); | |
} | |
@return if($test-list == $list, space, comma); | |
} | |
@mixin rem-baseline($zoom: 100%) { | |
font-size: $zoom / 16px * $rem-baseline; | |
} | |
@function rem-convert($to, $values...) { | |
$result: (); | |
$separator: rem-separator($values); | |
@each $value in $values { | |
@if type-of($value) == "number" and unit($value) == "rem" and $to == "px" { | |
$result: append($result, $value / 1rem * $rem-baseline, $separator); | |
} @else if type-of($value) == "number" and unit($value) == "px" and $to == "rem" { | |
$result: append($result, $value / ($rem-baseline / 1rem), $separator); | |
} @else if type-of($value) == "list" { | |
$result: append($result, rem-convert($to, $value...), $separator); | |
} @else { | |
$result: append($result, $value, $separator); | |
} | |
} | |
@return if(length($result) == 1, nth($result, 1), $result); | |
} | |
@function rem($values...) { | |
@if $rem-px-only { | |
@return rem-convert(px, $values...); | |
} @else { | |
@return rem-convert(rem, $values...); | |
} | |
} | |
@mixin rem($properties, $values...) { | |
@if type-of($properties) == "map" { | |
@each $property in map-keys($properties) { | |
@include rem($property, map-get($properties, $property)); | |
} | |
} @else { | |
@each $property in $properties { | |
@if $rem-fallback or $rem-px-only { | |
#{$property}: rem-convert(px, $values...); | |
} | |
@if not $rem-px-only { | |
#{$property}: rem-convert(rem, $values...); | |
} | |
} | |
} | |
} | |
html { | |
@include rem-baseline; | |
} | |
h1 { | |
@include rem(font-size, 24px); // Simple | |
@include rem(border-bottom, 1px solid black); // Shorthand | |
@include rem(box-shadow, 0 0 2px #ccc, inset 0 0 5px #eee); // Multiple values | |
text-shadow: rem(1px 1px #eee, -1px -1px #eee); // Function and multiple values | |
// List support (Sass 3.3+) | |
@include rem(( | |
margin: 20px 1rem, | |
padding: 10px | |
)); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
font-size: 62.5%; | |
} | |
h1 { | |
font-size: 24px; | |
font-size: 2.4rem; | |
border-bottom: 1px solid black; | |
border-bottom: 0.1rem solid black; | |
box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee; | |
box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee; | |
text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee; | |
margin: 20px 10px; | |
margin: 2rem 1rem; | |
padding: 10px; | |
padding: 1rem; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Test</h1> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment