Skip to content

Instantly share code, notes, and snippets.

@alexander-schranz

alexander-schranz/example1.scss

Last active October 11, 2022 15:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alexander-schranz/dd9579e63d75efaf89ccbbb7e8447843 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alexander-schranz/dd9579e63d75efaf89ccbbb7e8447843 to your computer and use it in GitHub Desktop.
Download ZIP
Example Font Size Settings
Raw
example1.scss
$font-family-headline: 'Lyon';
$font-family-base: 'Source Sans Pro';
$font-settings: (
mobile-headline-l: (
font-family: $font-family-headline,
font-size: 34px,
line-height: 38px,
font-weight: $font-weight-bold,
),
mobile-headline-m: (
font-family: $font-family-headline,
font-size: 30px,
line-height: 34px,
font-weight: $font-weight-bold,
),
mobile-headline-s: (
font-family: $font-family-headline,
font-size: 24px,
line-height: 28px,
font-weight: $font-weight-bold,
),
mobile-headline-xs: (
font-family: $font-family-headline,
font-size: 20px,
line-height: 24px,
font-weight: $font-weight-bold,
),
desktop-headline-l: (
font-family: $font-family-headline,
font-size: 42px,
line-height: 46px,
font-weight: $font-weight-bold,
),
desktop-headline-m: (
font-family: $font-family-headline,
font-size: 34px,
line-height: 38px,
font-weight: $font-weight-bold,
),
desktop-headline-s: (
font-family: $font-family-headline,
font-size: 26px,
line-height: 30px,
font-weight: $font-weight-bold,
),
desktop-headline-xs: (
font-family: $font-family-headline,
font-size: 22px,
line-height: 26px,
font-weight: $font-weight-bold,
),
body: (
font-size: 18px,
line-height: 26px,
),
a: (
text-decoration: underline,
),
strong: (
font-weight: $font-weight-bold,
),
small: (
font-size: 16px,
line-height: 26px,
),
button: (
font-size: 16px,
line-height: 24px,
font-weight: $font-weight-bold,
),
caption: (
font-size: 14px,
line-height: 20px,
),
overline: (
font-size: 11px,
line-height: 16px,
letter-spacing: 1px,
text-transform: uppercase,
),
);
Raw
example1_example.scss
.component {
@include('mobile-headline-m');
}
.component {
@include('mobile-headline-m', 'desktop-headline-l');
}
Raw
example2.scss
$font-family-headline: 'Lyon';
$font-family-base: 'Source Sans Pro';
$font-settings: (
headline-l: (
font-family: $font-family-headline,
font-size: 34px,
line-height: 38px,
font-weight: $font-weight-bold,
breakpoints: (
'>mobile': (
font-size: 42px,
line-height: 46px,
),
),
),
headline-m: (
font-family: $font-family-headline,
font-size: 30px,
line-height: 34px,
font-weight: $font-weight-bold,
breakpoints: (
'>mobile': (
font-size: 34px,
line-height: 38px,
),
),
),
headline-s: (
font-family: $font-family-headline,
font-size: 24px,
line-height: 28px,
font-weight: $font-weight-bold,
breakpoints: (
'>mobile': (
font-size: 26px,
line-height: 30px,
),
),
),
headline-xs: (
font-family: $font-family-headline,
font-size: 20px,
line-height: 24px,
font-weight: $font-weight-bold,
breakpoints: (
'>mobile': (
font-size: 22px,
line-height: 26px,
),
),
),
body: (
font-size: 18px,
line-height: 26px,
),
a: (
text-decoration: underline,
),
strong: (
font-weight: $font-weight-bold,
),
small: (
font-size: 16px,
line-height: 26px,
),
button: (
font-size: 16px,
line-height: 24px,
font-weight: $font-weight-bold,
),
caption: (
font-size: 14px,
line-height: 20px,
),
overline: (
font-size: 11px,
line-height: 16px,
letter-spacing: 1px,
text-transform: uppercase,
),
);
Raw
example2_example.scss
.component {
@include('headline-m');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment