I encountered an issue while attempting to customize font size and line height for each variable in quasar.variables.scss. Here is the error message that was displayed:
[plugin:vite:css] Undefined operation ""(600px,) > 0".
╷
6831 │ $noProcNotZero: $size > 0
│ ^^^^^^^^^
╵
node_modules/quasar/dist/quasar.sass 6831:19 fg()
node_modules/quasar/dist/quasar.sass 6971:3 root stylesheet
The snippet of my style sheet looks like this:
// Your custom Quasar SCSS (& Sass) Variables
// --------------------------------------------------
// You have the ability to override the default Sass/SCSS variables
// found in Quasar's source files in order to give your app a unique look.
// Visit the documentation for a full list of Quasar variables
// Both your declared variables and Quasar's will be accessible in your .vue/.scss/.sass files
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');
$primary: #da282f;
$secondary: hsl(0, 100%, 95%);
//$accent: #b927d3;
$primary-dark: #1b0000;
$background-accent: #f5f5f5;
$accent: #a0a0a0;
$background-accent: #f5f5f5;
$dark: #1d1d1d;
$dark-page: #121212;
$positive: #21ba45;
$negative: #c10015;
$info: #31ccec;
$warning: #f2c037;
$typography-font-family-secondary: 'Quicksand', sans-serif !default;
// Set maximum width for different screen sizes
$breakpoint-xs: 599px !default;
$breakpoint-sm: 1023px !default;
$breakpoint-md: 1439px !default;
$breakpoint-lg: 1919px !default;
$sizes: (
'xs': 0,
'sm': (
$breakpoint-xs + 1,
),
'md': (
$breakpoint-sm + 1,
),
'lg': (
$breakpoint-md + 1,
),
'xl': (
$breakpoint-lg + 1,
),
) !default;
$breakpoint-xs-max: (map-get($sizes, 'sm') - 0.02) !default;
$breakpoint-sm-min: map-get($sizes, 'sm') !default;
$breakpoint-sm-max: (map-get($sizes, 'md') - 0.02) !default;
$breakpoint-md-min: map-get($sizes, 'md') !default;
$breakpoint-md-max: (map-get($sizes, 'lg') - 0.02) !default;
$breakpoint-lg-min: map-get($sizes, 'lg') !default;
$breakpoint-lg-max: (map-get($sizes, 'xl') - 0.02) !default;
$breakpoint-xl-min: map-get($sizes, 'xl') !default;
// Define fonts and sizes for headings and text
$h1: (
size: 5rem,
line-height: 6rem,
letter-spacing: -0.01562em,
weight: 300,
) !default;
$h2: (
size: 3.75rem,
line-height: 3.75rem,
letter-spacing: -0.00833em,
weight: 300,
) !default;
...
// Media queries to adjust font sizes based on screen width
@media (max-width: $breakpoint-xs-max) {
.text-h1 {
font-size: 2.5rem;
line-height: 2.5rem;
}
...
}
@media (min-width: $breakpoint-sm-min) and (max-width: $breakpoint-sm-max) {
.text-h1 {
font-size: 3.5rem;
line-height: 3.5rem;
}
...
}
Is it not possible to modify breakpoint fonts in this manner? If not, what would be the best approach to achieve the desired effect of having headers resize as the screen size changes?