I have a type.scss file that I need to use to reference various stylings for the fonts.
// type.scss
@use 'queries' as *;
$font-rubik: 'Rubik', sans-serif;
$font-inter: 'Inter', sans-serif;
// Define typography for desktop
$desktop: (
h1: (font: $font-rubik, size: 64px, weight: bold),
h2: (font: $font-rubik, size: 48px, weight: bold),
h3: (font: $font-rubik, size: 40px, weight: bold),
h4: (font: $font-rubik, size: 32px, weight: bold),
p-large: (font: $font-inter, size: 24px, weight: semibold),
p-medium: (font: $font-inter, size: 24px, weight: regular),
button: (font: $font-rubik, size: 18px, weight: semibold)
);
// Define typography for tablet
$tablet: (
h1: (font: $font-rubik, size: 52px, weight: bold),
h2: (font: $font-rubik, size: 32px, weight: bold),
h3: (font: $font-rubik, size: 24px, weight: bold),
h4: (font: $font-rubik, size: 18px, weight: bold),
p-large: (font: $font-inter, size: 14px, weight: semibold),
p-medium: (font: $font-inter, size: 12px, weight: regular),
button: (font: $font-rubik, size: 12px, weight: semibold)
);
// Define typography for mobile
$mobile: (
h1: (font: $font-rubik, size: 32px, weight: bold),
h2: (font: $font-rubik, size: 24px, weight: bold),
h3: (font: $font-rubik, size: 18px, weight: bold),
h4: (font: $font-rubik, size: 14px, weight: bold),
p-large: (font: $font-inter, size: 12px, weight: semibold),
p-medium: (font: $font-inter, size: 12px, weight: regular),
button: (font: $font-rubik, size: 12px, weight: semibold)
);
// Mixin to apply responsive typography
@mixin typography($device) {
h1 { font-family: map-get(map-get($device, h1), font); font-size: map-get(map-get($device, h1), size); font-weight: map-get(map-get($device, h1), weight); }
h2 { font-family: map-get(map-get($device, h2), font); font-size: map-get(map-get($device, h2), size); font-weight: map-get(map-get($device, h2), weight); }
h3 { font-family: map-get(map-get($device, h3), font); font-size: map-get(map-get($device, h3), size); font-weight: map-get(map-get($device, h3), weight); }
h4 { font-family: map-get(map-get($device, h4), font); font-size: map-get(map-get($device, h4), size); font-weight: map-get(map-get($device, h4), weight); }
p.large { font-family: map-get(map-get($device, p-large), font); font-size: map-get(map-get($device, p-large), size); font-weight: map-get(map-get($device, p-large), weight); }
p.medium { font-family: map-get(map-get($device, p-medium), font); font-size: map-get(map-get($device, p-medium), size); font-weight: map-get(map-get($device, p-medium), weight); }
button { font-family: map-get(map-get($device, button), font); font-size: map-get(map-get($device, button), size); font-weight: map-get(map-get($device, button), weight); }
}
Media queries for responsive design
body {
@include typography($desktop); // Default styles for desktop
}
// Tablet Styles
@media (max-width: 992px) and (min-width: 769px) { // Target tablets between these widths
body {
@include typography($tablet);
}
}
// Mobile Styles
@media (max-width: 768px) { // Target mobile devices up to 768px
body {
@include typography($mobile);
}
}
I’ve imported this into another scss file via @use '../../css/type.scss' as *; and am trying to include the typography into a few of the classes, for example:
// include.module.scss
.searchTitle {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
color: var(--main-color, #154058);
align-self: stretch;
text-align: center;
font-family: 'Rubik'; // all the hardcoded font stuff is what I'm trying to replace
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 36px */
}
This class styles a <p> tag <p className={classes.searchTitle}>Find education materials</p> and the idea is that including the mixin typographies would size and style the <p> tag accordingly based on the resolution. So I tried it but none of the styles applied.
I attempted to add a $class-name variable into the mixin too but that kept resulting in an error where I was missing an argument.
// type.scss
@mixin typography($device, $class-name) {
.#{$class-name} {
h1 { font-family: map-get(map-get($device, h1), font); font-size: map-get(map-get($device, h1), size); font-weight: map-get(map-get($device, h1), weight); }
h2 { font-family: map-get(map-get($device, h2), font); font-size: map-get(map-get($device, h2), size); font-weight: map-get(map-get($device, h2), weight); }
h3 { font-family: map-get(map-get($device, h3), font); font-size: map-get(map-get($device, h3), size); font-weight: map-get(map-get($device, h3), weight); }
h4 { font-family: map-get(map-get($device, h4), font); font-size: map-get(map-get($device, h4), size); font-weight: map-get(map-get($device, h4), weight); }
p.large { font-family: map-get(map-get($device, p-large), font); font-size: map-get(map-get($device, p-large), size); font-weight: map-get(map-get($device, p-large), weight); }
p.medium { font-family: map-get(map-get($device, p-medium), font); font-size: map-get(map-get($device, p-medium), size); font-weight: map-get(map-get($device, p-medium), weight); }
button { font-family: map-get(map-get($device, button), font); font-size: map-get(map-get($device, button), size); font-weight: map-get(map-get($device, button), weight); }
}
}
// include.module.scss
@include typography($desktop, 'searchTitle');
@media (max-width: 992px) and (min-width: 769px) {
@include typography($tablet, 'searchTitle');
}
@media (max-width: 768px) {
@include typography($mobile, 'searchTitle');
}
I’m kind of stuck here and I’m not sure how to fix the styling or actually have it take effect:
[sass] Missing argument $class-name.
╷
40 │ @mixin typography($device, $class-name) {
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ declaration
... │
54 │ @include typography($desktop); // Default styles for desktop
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
╵
src/css/type.scss 54:3 typography()
src/css/type.scss 54:3 @use
src/pages/Home/index.module.scss 1:1 root stylesheet