Created
March 28, 2022 09:46
-
-
Save Jikol/0b95652199c2ac69544349dfc8e00ab1 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
| /// Vertical rhythm grid unit | |
| /// @param {Number} $multiplier [1] - vertical rhythm multiplier | |
| /// @return {Rem} - vertical rhythm unit | |
| @function grid-unit($multiplier: 1) { | |
| @return #{strip-unit($base-font-size) * $multiplier * $base-line-height * 0.0625}rem; | |
| } | |
| /// Remove the unit of a length | |
| /// @param {Number} $number - Number to remove unit from | |
| /// @return {Number} - Unitless number | |
| @function strip-unit($number) { | |
| @if type-of($number) == "number" and not unitless($number) { | |
| @return $number / ($number * 0 + 1); | |
| } | |
| @return $number; | |
| } | |
| /// Correct font baseline on "real" baseline of vertical rhythm unit | |
| // $size and $lineheight might be in pixels | |
| @mixin baseline($size, $lineheight) { | |
| $size-rems: strip-unit($size / $rootsize); | |
| $capheight-rems: $size-rems * map-get($font, cap-height); | |
| $lh-rems: strip-unit($lineheight / $rootsize); | |
| $shift: ($lh-rems - $capheight-rems) / 2; | |
| font-family: #{map-get($font, font-family)}; | |
| font-size: #{$size-rems}rem; | |
| padding-top: #{$shift}rem; | |
| margin-bottom: #{$shift * -1}rem; | |
| line-height: #{$lh-rems}rem; | |
| } | |
| /// Base font and line height reset | |
| $base-font-size: 16px; /* ~1rem */ | |
| $base-line-height: 1.4; | |
| /// Apply base font size and line height to root element for create vertical | |
| /// rhythm grid | |
| html { | |
| font-size: $base-font-size; | |
| line-height: grid-unit(); | |
| } | |
| /// Apply to headings | |
| h1 { | |
| margin-bottom: grid-unit(2); | |
| /* reaplce with one mixin (baseline) which add right padding-top, | |
| margin-bottom and line-height according to only font size | |
| (might be in px or rem) */ | |
| } | |
| /// Apply to paragraph | |
| p { | |
| line-height: grid-unit(); | |
| /* reaplce with one mixin (baseline) which add right padding-top, | |
| margin-bottom and line-height according to only font size | |
| (might be in px or rem) */ | |
| } | |
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
| /* ~1rem */ | |
| html { | |
| font-size: 16px; | |
| line-height: 1.4rem; | |
| } | |
| h1 { | |
| margin-bottom: 2.8rem; | |
| /* reaplce with one mixin (baseline) which add right padding-top, | |
| margin-bottom and line-height according to only font size | |
| (might be in px or rem) */ | |
| } | |
| p { | |
| line-height: 1.4rem; | |
| /* reaplce with one mixin (baseline) which add right padding-top, | |
| margin-bottom and line-height according to only font size | |
| (might be in px or rem) */ | |
| } |
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
| { | |
| "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