Skip to content

Instantly share code, notes, and snippets.

@tedw
Created April 1, 2021 17:22
Show Gist options
  • Save tedw/ca67e7102b3a905b2c3f88664b33469c to your computer and use it in GitHub Desktop.
Save tedw/ca67e7102b3a905b2c3f88664b33469c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
/// Base font size
/// @group Main
/// @type Number
$fs-base-font-size: 16px !default;
/// Convert px to em
/// @group Main
/// @param {Number | Map} $values - Value or values to convert
/// @param {Number} $context [$fs-base-font-size] - Base font size
/// @return {*} - Converted value or list of values
/// @require {variable} $fs-base-font-size - Base font size
@function fs-em($values, $context: $fs-base-font-size) {
// Ensure context size is in pixels
@if unit($context) != 'px' {
@error '🔴 #{$context} size must be in pixels';
}
// Placeholder list for converted values
$output: ();
@each $val in $values {
// Check if pixel value
@if type-of($val) == 'number' and unit($val) == 'px' {
// Convert to ems
$val: ($val / $context) * 1em;
}
// Do nothing to all other values
@else if $fs-debug-mode {
@warn '⚠️ Can’t convert non-pixel value to ems: #{$val}';
}
// Append value to output list
$output: append($output, $val);
}
// Return converted value(s)
@return $output;
}
/// Convert px to rem
/// @group Main
/// @param {Number | Map} $values - Value values to convert
/// @param {Number} $context [$fs-base-font-size] - Base font size
/// @return {*} - Converted value or list of values
/// @require {variable} $fs-base-font-size - Base font size
@function fs-rem($values) {
// Placeholder list for converted values
$output: ();
@each $val in $values {
// Check if pixel value
@if type-of($val) == 'number' and unit($val) == 'px' {
// Convert to rems
$val: ($val / $fs-base-font-size) * 1rem;
}
// Do nothing to all other values
@else if $fs-debug-mode and $val != 0 {
@warn '⚠️ Can’t convert non-pixel value to rems: #{$val}';
}
// Append value to output list
$output: append($output, $val);
}
// Return converted value(s)
@return $output;
}
////
/// @group Main
////
/// Base media query mixin
/// @param {Number | Map} $conditions - Width or map of conditions
///
/// @example scss
/// @include fs-media((min-width: 600px)) {…}
///
/// @include fs-media((min-width: 600px, max-width: 900px, min-height: 500px, min-aspect-ratio: "1/1")) {…}
///
/// @ignore Convert units to ems when applicable http://zellwk.com/blog/media-query-units/
/// @ignore Note: EMs in media queries are relative to the initial browser font-size (16px) http://www.w3.org/TR/css3-mediaqueries/#units
/// @ignore Demo: http://www.sassmeister.com/gist/908ff8ee2e2e0b18f768fcbc87df385c
@mixin fs-media($conditions) {
// Check if $conditions is a valid map
@if type-of($conditions) != 'map' {
@error '🔴 “#{$conditions}” is not a valid Sass map';
}
@else {
$mq-conditions: '';
// Convert map to properly formatted media query string
@each $type, $value in $conditions {
// Use str-insert() with -1 index to append value to the end
$mq-conditions: str-insert($mq-conditions, 'and (#{$type}: #{$value}) ', -1);
}
// Output the media query
@media all #{$mq-conditions} {
@content;
}
}
}
/// Min-width media query helper
/// @require {mixin} fs-media
/// @param {Number} $width - Breakpoint width
///
/// @example scss
/// @include fs-min-width(960px) {…}
///
@mixin fs-min-width($width) {
@include fs-media((min-width: $width)) {
@content;
}
}
/// Max-width media query helper
/// @require {mixin} fs-media
/// @param {Number} $width - Breakpoint width
///
/// @example scss
/// @include fs-max-width(960px) {…}
///
@mixin fs-max-width($width) {
@include fs-media((max-width: $width)) {
@content;
}
}
/// Min-height media query helper
/// @require {mixin} fs-media
/// @param {Number} $height - Breakpoint height
///
/// @example scss
/// @include fs-min-height(500px) {…}
///
@mixin fs-min-height($height) {
@include fs-media((min-height: $height)) {
@content;
}
}
/// Max-height media query helper
/// @require {mixin} fs-media
/// @param {Number} $height - Breakpoint height
///
/// @example scss
/// @include fs-max-height(500px) {…}
///
@mixin fs-max-height($height) {
@include fs-media((max-height: $height)) {
@content;
}
}
@function fs-scale($start, $end, $min-width, $max-width, $units: 'rem') {
@if $start > 0 and $end > 0 and unit($start) != unit($end) {
@error '🔴 fs-scale() units don’t match';
}
$slope: ($end - $start) / ($max-width - $min-width);
$intercept: $end - ($slope * $max-width);
@if (fs-strip-unit($intercept) == 0) {
@return $slope * 100vw;
}
@else {
@if $units == 'em' {
@return calc(#{$slope * 100vw} + #{$intercept});
}
@else {
@return calc(#{$slope * 100vw} + #{$intercept});
}
}
}
/// Scale a value for any number of properites relative to the viewport width
/// @group Main
/// @access private
/// @ignore TODO: In next major version, rename fs-scale-poly() as fs-scale()
/// @param {String | List} $properties - Properties to scale
/// @param {Number} $start - Starting value
/// @param {Boolean} $initial [true] - Output initial value (not inside media query)
/// @param {String} $units ['rem'] - Output units
/// @require {function} fs-rem
/// @require {function} fs-scale
/// @require {mixin} fs-min-width
/// @require {mixin} fs-max-width
/// @ignore Demo https://www.sassmeister.com/gist/f8ba9be15cf926d2dc983a7004c089a6
/// @link http://www.sassmeister.com/gist/7f22e44ace49b5124eec
/// @link http://madebymike.com.au/writing/precise-control-responsive-typography/
/// @link https://zellwk.com/blog/viewport-based-typography/
/// @link http://codepen.io/indrekpaas/pen/VarLaJ?editors=1100
/// @link http://codepen.io/maranomynet/pen/ozNpXV?editors=1100
/// @link https://www.smashingmagazine.com/2016/05/fluid-typography/
/// @link https://github.com/Jakobud/poly-fluid-sizing
/// @example scss
/// @include fs-scale(font-size, (320px: 18px, 1024px: 38px));
/// @example scss
/// @include fs-scale(margin-bottom margin-top, (
/// 320px: 18px,
/// 768px: 26px,
/// 1024px: 38px
/// ));
/// @example scss
/// @include fs-scale(font-size, (768px: 26px, 1024px: 38px), $initial: false);
/// @example scss
/// @include fs-scale(font-size, (768px: 26px, 1024px: 38px), $units: 'em');
@mixin fs-scale-poly($properties, $map, $initial: true, $units: 'rem') {
$length: length($map);
@if ($length < 2) {
@error "fs-scale() requires at least two breakpoints";
}
$breakpoints: map-keys($map);
$values: map-values($map);
// Initial value
$start-val: nth($values, 1);
@if $initial {
@each $property in $properties {
@if $units == 'em' {
#{$property}: fs-em($start-val);
}
@else {
#{$property}: $start-val;
}
}
}
// Scale up with calc() at each breakpoint
@for $i from 1 through ($length - 1) {
$start-breakpoint: nth($breakpoints, $i);
$end-breakpoint: nth($breakpoints, $i + 1);
$start-value: nth($values, $i);
$end-value: nth($values, $i + 1);
@include fs-min-width($start-breakpoint) {
@each $property in $properties {
#{$property}: fs-scale($start-value, $end-value, $start-breakpoint, $end-breakpoint, $units);
}
}
}
// Final value
$end-val: nth($values, $length);
$end-breakpoint: nth($breakpoints, $length);
@include fs-min-width($end-breakpoint) {
@each $property in $properties {
@if $units == 'em' {
#{$property}: fs-em($end-val);
}
@else {
#{$property}: fs-rem($end-val);
}
}
}
}
/// Scale a value for any number of properites relative to the viewport width
/// @group Main
/// @param {String | List} $properties - Properties to scale
/// @param {Number} $start - Starting value
/// @param {Number} $end - Ending value
/// @param {Number} $min-width - Starting viewport width
/// @param {Number} $max-width - Ending viewport width
/// @param {Boolean} $fallback [true] - Output starting value outside of media query
/// @require {function} fs-rem
/// @require {function} fs-scale
/// @require {mixin} fs-min-width
/// @require {mixin} fs-max-width
/// @ignore Demo https://www.sassmeister.com/gist/9f87f8c19e91c811831d84fc8484ed24
/// @link http://www.sassmeister.com/gist/7f22e44ace49b5124eec
/// @link http://madebymike.com.au/writing/precise-control-responsive-typography/
/// @link https://zellwk.com/blog/viewport-based-typography/
/// @link http://codepen.io/indrekpaas/pen/VarLaJ?editors=1100
/// @link http://codepen.io/maranomynet/pen/ozNpXV?editors=1100
/// @link https://www.smashingmagazine.com/2016/05/fluid-typography/
/// @example scss
/// @include fs-scale(font-size, 20px, 30px, 320px, 400px);
/// @example scss
/// @include fs-scale(margin-bottom margin-top, 10px, 20px, 500px, 600px);
@mixin fs-scale-legacy($properties, $start, $end, $min-width, $max-width, $fallback: true, $units: 'rem') {
@warn 'Upgrade fs-scale() to new map syntax, fs-scale(#{$properties}, (#{$min-width}: #{$start}, #{$max-width}: #{$end}))';
// Starting size
@if $fallback {
@each $property in $properties {
@if $units == 'em' {
#{$property}: $start;
}
@else {
#{$property}: $start;
}
}
}
// Scale up with calc()
@include fs-min-width($min-width) {
@each $property in $properties {
#{$property}: fs-scale($start, $end, $min-width, $max-width, $units);
}
}
// Final size
@include fs-min-width($max-width) {
@each $property in $properties {
@if $units == 'em' {
#{$property}: $end;
}
@else {
#{$property}: $end;
}
}
}
}
@mixin fs-scale($args...) {
@if length($args) > 1 and type-of(nth($args, 2)) == 'map' {
@include fs-scale-poly($args...);
}
@else {
@include fs-scale-legacy($args...);
}
}
.new-2-bp {
@include fs-scale(font-size, (360px: 24px, 800px: 32px));
}
.new-3-bp {
@include fs-scale(font-size, (360px: 24px, 800px: 32px, 1200px: 48px));
}
.new-4-bp {
@include fs-scale(font-size, (360px: 24px, 799px: 32px, 800px: 24px, 1200px: 32px));
}
.new-ems {
@include fs-scale(font-size, (360px: 24px, 800px: 32px), $units: "em");
}
.new-initial-false {
@include fs-scale(font-size, (576px: 22px, 768px: 24px), $initial: false);
}
.old {
@include fs-scale(font-size, 22px, 24px, 576px, 768px);
@include fs-scale(font-size, 24px, 34px, 768px, 992px, $fallback: false);
}
.old-ems {
@include fs-scale(font-size, 22px, 24px, 576px, 768px, $units: "em");
}
.new-2-bp {
font-size: 24px;
}
@media all and (min-width: 360px) {
.new-2-bp {
font-size: calc(1.8181818182vw + 17.4545454545px);
}
}
@media all and (min-width: 800px) {
.new-2-bp {
font-size: 2rem;
}
}
.new-3-bp {
font-size: 24px;
}
@media all and (min-width: 360px) {
.new-3-bp {
font-size: calc(1.8181818182vw + 17.4545454545px);
}
}
@media all and (min-width: 800px) {
.new-3-bp {
font-size: calc(4vw + 0px);
}
}
@media all and (min-width: 1200px) {
.new-3-bp {
font-size: 3rem;
}
}
.new-4-bp {
font-size: 24px;
}
@media all and (min-width: 360px) {
.new-4-bp {
font-size: calc(1.8223234624vw + 17.4396355353px);
}
}
@media all and (min-width: 799px) {
.new-4-bp {
font-size: calc(-800vw + 6424px);
}
}
@media all and (min-width: 800px) {
.new-4-bp {
font-size: calc(2vw + 8px);
}
}
@media all and (min-width: 1200px) {
.new-4-bp {
font-size: 2rem;
}
}
.new-ems {
font-size: 1.5em;
}
@media all and (min-width: 360px) {
.new-ems {
font-size: calc(1.8181818182vw + 17.4545454545px);
}
}
@media all and (min-width: 800px) {
.new-ems {
font-size: 2em;
}
}
@media all and (min-width: 576px) {
.new-initial-false {
font-size: calc(1.0416666667vw + 16px);
}
}
@media all and (min-width: 768px) {
.new-initial-false {
font-size: 1.5rem;
}
}
.old {
font-size: 22px;
}
@media all and (min-width: 576px) {
.old {
font-size: calc(1.0416666667vw + 16px);
}
}
@media all and (min-width: 768px) {
.old {
font-size: 24px;
}
}
@media all and (min-width: 768px) {
.old {
font-size: calc(4.4642857143vw + -10.2857142857px);
}
}
@media all and (min-width: 992px) {
.old {
font-size: 34px;
}
}
.old-ems {
font-size: 22px;
}
@media all and (min-width: 576px) {
.old-ems {
font-size: calc(1.0416666667vw + 16px);
}
}
@media all and (min-width: 768px) {
.old-ems {
font-size: 24px;
}
}
{
"sass": {
"compiler": "Ruby Sass/3.7.4",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment