Created
March 25, 2024 11:42
-
-
Save sturobson/ac929208cf48f3dfb8d9ae22b8f7689d 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
// Default Typographic Styles | |
// -------------------------- | |
// Font Families | |
$font-family--default: "Inter", Arial, Helvetica Neue, Helvetica, sans-serif; | |
$font-family--display: "Anton", Arial Black, Arial Bold, Gadget, sans-serif; | |
// Font Weights | |
$font-weight--400: 400; | |
$font-weight--500: 500; | |
$font-weight--700: 700; | |
// Font Sizes | |
$font-size--1: clamp(0.9375rem, 0.9203rem + 0.0862vi, 1rem); | |
$font-size-0: clamp(1.125rem, 1.0905rem + 0.1724vi, 1.25rem); | |
$font-size-1: clamp(1.35rem, 1.2914rem + 0.2931vi, 1.5625rem); | |
$font-size-2: clamp(1.62rem, 1.5281rem + 0.4595vi, 1.9531rem); | |
$font-size-3: clamp(1.944rem, 1.8068rem + 0.6861vi, 2.4414rem); | |
$font-size-4: clamp(2.3328rem, 2.1345rem + 0.9917vi, 3.0518rem); | |
$font-size-5: clamp(2.7994rem, 2.5193rem + 1.4005vi, 3.8147rem); | |
$font-size-6: clamp(3.3592rem, 2.9705rem + 1.9436vi, 4.7684rem); | |
// Typographic Sass Maps | |
// --------------------- | |
// Typography Options | |
$typography-options: ( | |
default: ( | |
weight: $font-weight--500, | |
line-height: 1.2, | |
letter-spacing: -0.0135rem, | |
font-sizes: ( | |
-1: $font-size--1, | |
0: $font-size-0, | |
1: $font-size-1 | |
) | |
), | |
prose: ( | |
weight: $font-weight--500, | |
line-height: 1.5, | |
letter-spacing: -0.01619rem, | |
font-sizes: ( | |
-1: $font-size--1, | |
0: $font-size-0, | |
1: $font-size-1, | |
2: $font-size-2 | |
) | |
), | |
strong: ( | |
weight: $font-weight--700, | |
line-height: 1.2, | |
letter-spacing: -0.038875rem, | |
font-sizes: ( | |
-1: $font-size--1, | |
0: $font-size-0, | |
1: $font-size-1, | |
2: $font-size-2, | |
3: $font-size-3 | |
) | |
), | |
display: ( | |
weight: $font-weight--400, | |
line-height: 1.05, | |
letter-spacing: -1.075px, | |
font-sizes: ( | |
4: $font-size-4, | |
5: $font-size-5, | |
6: $font-size-6 | |
) | |
) | |
); | |
// Mixin for typography styles | |
// --------------------------- | |
@mixin typography($option, $size) { | |
$option-settings: map-get($typography-options, $option); | |
font-weight: map-get($option-settings, 'weight'); | |
line-height: map-get($option-settings, 'line-height'); | |
letter-spacing: map-get($option-settings, 'letter-spacing'); | |
font-size: map-get(map-get($option-settings, 'font-sizes'), $size); | |
// Apply font-family only for 'display' option | |
@if $option == 'display' { | |
font-family: $font-family--display; | |
} | |
} | |
// Usage example | |
.bc-hero { | |
h1 { | |
@include typography('display', 6); | |
} | |
} |
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
.bc-hero h1 { | |
font-weight: 400; | |
line-height: 1.05; | |
letter-spacing: -1.075px; | |
font-size: clamp(3.3592rem, 2.9705rem + 1.9436vi, 4.7684rem); | |
font-family: "Anton", Arial Black, Arial Bold, Gadget, sans-serif; | |
} |
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