Building a site that’s my first Sage project. Got Sage set up without a hitch a couple weeks ago and it’s been awesome. The only trouble I’ve run into is figuring out how to modify styles using @media
queries in main.scss. All discussions I’ve been able to find via google/stackoverflow/blogs/Sage docs/Roots Discourse seem to be out of date and point specifically to Roots setups/builds with Less instead of Sass in previous versions.
I think my problem might stem from an unfamiliarity with Bootstrap workflow best-practices as opposed to Sage. I’m trying to do something as simple as change the font-size of an h1 when on any screens >= 768px (i.e. @media (min-width: @screen-sm-min) { … } via to Bootstrap documentation
As an example, if I enter this code into main.scss:
h1 {
font-size: 40px;
@media (min-width: @screen-sm-min) {
font-size: 60px;
}
I see the following in Terminal:
Error: error reading values after
on line 310 of stdin
>> @media (min-width: @screen-sm-min) {
-------------------^
From what I can gather, seems like there is a grid/media query class living somewhere I could give to my h1
and then edit the font-size
of that class’ h1
accordingly. Figured I’d be able to dig around in assets and would come up with a solution but I’m still at a loss and know I’m overlooking something that’s probably far easier than I’m making it for myself.
Any/all guidance is much appreciated - thanks.