Skip to content

Instantly share code, notes, and snippets.

@abhiomkar
Created March 15, 2021 23:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abhiomkar/f913e62dea48c9e2a8460f4172c161ab to your computer and use it in GitHub Desktop.
Save abhiomkar/f913e62dea48c9e2a8460f4172c161ab to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use 'sass:meta';
@use 'sass:map';
// -----------------------
// _gm-sys-typescale.scss
// -----------------------
$body1-font: 'Google Sans Text';
$body1-line-height: 24px;
$body1-size: 16px;
$body1-tracking: 0px;
$body1-weight: 400;
// -----------------------
// typography/_mixins.scss
// -----------------------
@function _px-to-rem($size) {
@return $size / 16px * 1rem;
}
@mixin _font($font) {
@if $font == 'Google Sans Text' {
$font: 'Google Sans';
}
font-family: $font, Roboto, Arial, sans-serif;
}
@mixin _line-height($value) {
line-height: _px-to-rem($value);
}
@mixin _size($value) {
font-size: _px-to-rem($value);
}
@mixin _tracking($value, $size) {
letter-spacing: $value / $size * 1em;
}
@mixin _weight($value) {
font-weight: $value;
}
@mixin typescale($font: null,
$line-height: null,
$size: null,
$tracking: null,
$weight: null) {
@if $font {
@include _font($font);
}
@if $line-height {
@include _line-height($line-height);
}
@if $size {
@include _size($size);
}
@if $tracking {
@include _tracking($tracking, $size);
}
@if $weight {
@include _weight($weight);
}
}
// -----------------------
// _app.scss
// -----------------------
.body-text {
@include typescale(
$font: $body1-font,
$line-height: $body1-line-height,
$size: $body1-size,
$tracking: $body1-tracking,
$weight: $body1-weight,
)
}
.body-text {
font-family: "Google Sans", Roboto, Arial, sans-serif;
line-height: 1.5rem;
font-size: 1rem;
letter-spacing: 0em;
font-weight: 400;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"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