Modifying scss styles with media queries in Sage

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.

Since you’re using SASS and not LESS, that should be $screen-sm-min

1 Like

Thank you! Had a feeling I was overlooking a tiny detail and should have caught @ vs $. Really appreciate your help.