Skip to content

Instantly share code, notes, and snippets.

@Jikol

Jikol/input.scss

Created June 21, 2022 10:19
Show Gist options
  • Save Jikol/f7340703e0d56f4a16b000a7c4d86518 to your computer and use it in GitHub Desktop.
Save Jikol/f7340703e0d56f4a16b000a7c4d86518 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
@use 'sass:list';
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use 'sass:math';
$base-font-size: 16px; /* ~1rem */
$base-line-height: 1.12;
@function strip-unit($number) {
@if meta.type-of($number) == "number" and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
@function grid-unit($multiplier: 1) {
@return #{strip-unit($base-font-size) * $multiplier * $base-line-height * 0.0625}rem;
}
@function px-to-rem($value, $base) {
$new-value: 0;
$new-base: 0;
@if meta.type-of($value) != "number" or meta.type-of($base) != "number" {
@error "#{$value} and #{$base} might be both number with `px`, " +
"or unitless number. #{meta.type-of($value)} and #{meta.type-of($base)} found";
} @else {
$valid-number: true;
@if not math.is-unitless($value) {
@if math.unit($value) != "px" {
$valid-number: false;
} @else {
$new-value: strip-unit($value);
}
} @else {
$new-value: $value;
}
@if not math.is-unitless($base) {
@if math.unit($base) != "px" {
$valid-number: false;
} @else {
$new-base: strip-unit($base);
}
} @else {
$new-base: $base;
}
@if not $valid-number {
@error "#{$value} and #{$base} might be both number with `px`, or unitless number. " +
"#{meta.type-of($value)}[#{math.unit($value)}] and " +
"#{meta.type-of($base)}[#{math.unit($base)}] found";
}
}
@return $new-value / $new-base * 1rem;
}
@function px-to-em($value, $base) {
$new-value: 0;
$new-base: 0;
@if meta.type-of($value) != "number" or meta.type-of($base) != "number" {
@error "#{$value} and #{$base} might be both number with `px`, " +
"or unitless number. #{meta.type-of($value)} and #{meta.type-of($base)} found";
} @else {
$valid-number: true;
@if not math.is-unitless($value) {
@if math.unit($value) != "px" {
$valid-number: false;
} @else {
$new-value: strip-unit($value);
}
} @else {
$new-value: $value;
}
@if not math.is-unitless($base) {
@if math.unit($base) != "px" {
$valid-number: false;
} @else {
$new-base: strip-unit($base);
}
} @else {
$new-base: $base;
}
@if not $valid-number {
@error "#{$value} and #{$base} might be both number with `px`, or unitless number. " +
"#{meta.type-of($value)}[#{math.unit($value)}] and " +
"#{meta.type-of($base)}[#{math.unit($base)}] found";
}
}
@return $new-value / $new-base * 1em;
}
@function str-to-unit($value) {
$units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
$parsed-unit: false;
@each $unit in $units {
@if (string.index($value, list.nth($unit, 1))) {
$parsed-unit: list.nth($unit, 2);
}
}
@if not $parsed-unit {
@error "Invalid unit `#{$value}`.";
}
$result: 0;
$digits: 0;
$minus: string.slice($value, 1, 1) == '-';
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
@for $i from if($minus, 2, 1) through string.length($value) {
$character: string.slice($value, $i, $i);
@if (list.index(map.keys($numbers), $character) or $character == '.') {
@if $character == '.' {
$digits: 1;
} @else if $digits == 0 {
$result: $result * 10 + map.get($numbers, $character);
} @else {
$digits: $digits * 10;
$result: $result + map.get($numbers, $character) / $digits;
}
}
}
$parsed-number: if($minus, -$result, $result);
@return $parsed-number * $parsed-unit;
}
@function unit-perct-mult($unit, $percentage) {
$stripped: strip-unit($unit);
$computed: $percentage / 100 * $stripped;
$computed: $computed + $stripped;
@return #{$computed} + #{math.unit($unit)}
}
.testik {
test: unit-perct-mult(1.5rem, 20);
}
$breakpoints: (
sm: 672px,
md: 990px,
lg: 1296px
);
$percentage-difference-multiplier: 30;
$font-size-adjuster: (
200: -0.4,
300: -0.1,
400: 0,
500: +0.1,
600: +0.4,
700: +0.7,
800: +1.1
);
$font-size: px-to-rem($base-font-size, $base-font-size);
$font-sizes: (
base: (
200: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))),
300: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 300))),
400: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 400))),
500: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 500))),
600: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 600))),
700: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 700))),
800: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 800))),
),
sm: (
200: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier),
300: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 300))), $percentage-difference-multiplier),
400: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 400))), $percentage-difference-multiplier),
500: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 600))),
600: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 600))), $percentage-difference-multiplier),
700: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 700))), $percentage-difference-multiplier),
800: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 800))), $percentage-difference-multiplier),
),
md: (
200: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 2),
300: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 300))), $percentage-difference-multiplier * 2),
400: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 400))), $percentage-difference-multiplier * 2),
500: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 500))),
600: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 600))), $percentage-difference-multiplier * 2),
700: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 700))), $percentage-difference-multiplier * 2),
800: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 800))), $percentage-difference-multiplier * 2),
),
lg: (
200: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
300: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
400: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
500: $font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 500))),
600: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
700: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
800: unit-perct-mult($font-size + str-to-unit(grid-unit(map.get($font-size-adjuster, 200))), $percentage-difference-multiplier * 3),
),
);
$font-path: "../fonts";
$fonts: (
poppins: (
name: "Poppins",
types: (
400: (
src: "#{$font-path}/Poppins-400.ttf",
format: "truetype",
weight: 400,
style: normal
),
500: (
src: "#{$font-path}/Poppins-500.ttf",
format: "truetype",
weight: 500,
style: normal
),
600: (
src: "#{$font-path}/Poppins-600.ttf",
format: "truetype",
weight: 600,
style: normal
)
)
),
);
.testik {
test: math.round(0.79635 * 1000) / 1000;
}
@mixin mq($key) {
$size: map.get($breakpoints, $key);
@if not $size {
@error "#{$key} is not valid property. Expected: [#{map.keys($breakpoints)}]";
}
@media only screen and (min-width: px-to-em($size, $base-font-size)) {
@content;
}
}
@mixin font($key) {
$fallback-fonts: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
font-family: map.get(map.get($fonts, $key), "name"), #{$fallback-fonts};
}
:root {
@each $breakpoint, $size in $font-sizes {
@if not list.index(map.keys($breakpoints), $breakpoint) {
@each $size, $value in $size {
--fs-#{$size}: #{$value};
}
} @else {
@include mq($breakpoint) {
@each $size, $value in $size {
--fs-#{$size}: #{$value};
}
}
}
}
}
/// Font-size applier
@mixin font-size($key) {
font-size: var(--fs-#{$key});
$font-size: strip-unit(map.get(map.get($font-sizes, "base"), $key));
line-height: grid-unit($font-size);
@each $breakpoint, $value in $breakpoints {
$font-size: strip-unit(map.get(map.get($font-sizes, $breakpoint), $key));
@include mq($breakpoint) {
line-height: grid-unit($font-size);
}
}
}
.test {
&__one {
@include font(poppins);
@include font-size(500);
font-weight: 400;
}
}
Raw
output.css
/* ~1rem */
.testik {
test: 1.8rem;
}
.testik {
test: 0.796;
}
:root {
--fs-200: 0.552rem;
--fs-300: 0.888rem;
--fs-400: 1rem;
--fs-500: 1.112rem;
--fs-600: 1.448rem;
--fs-700: 1.784rem;
--fs-800: 2.232rem;
}
@media only screen and (min-width: 42em) {
:root {
--fs-200: 0.7176rem;
--fs-300: 1.1544rem;
--fs-400: 1.3rem;
--fs-500: 1.448rem;
--fs-600: 1.8824rem;
--fs-700: 2.3192rem;
--fs-800: 2.9016rem;
}
}
@media only screen and (min-width: 61.875em) {
:root {
--fs-200: 0.8832rem;
--fs-300: 1.4208rem;
--fs-400: 1.6rem;
--fs-500: 1.112rem;
--fs-600: 2.3168rem;
--fs-700: 2.8544rem;
--fs-800: 3.5712rem;
}
}
@media only screen and (min-width: 81em) {
:root {
--fs-200: 1.0488rem;
--fs-300: 1.0488rem;
--fs-400: 1.0488rem;
--fs-500: 1.112rem;
--fs-600: 1.0488rem;
--fs-700: 1.0488rem;
--fs-800: 1.0488rem;
}
}
.test__one {
font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
font-size: var(--fs-500);
line-height: 1.24544rem;
font-weight: 400;
}
@media only screen and (min-width: 42em) {
.test__one {
line-height: 1.62176rem;
}
}
@media only screen and (min-width: 61.875em) {
.test__one {
line-height: 1.24544rem;
}
}
@media only screen and (min-width: 81em) {
.test__one {
line-height: 1.24544rem;
}
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"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