2

In my angular application, I am writing scss for responsive design & I have few SASS variables declared outside & inside the media queries, but the variables declared inside the media query are not working.

In fonts.scss which is placed in 'styles' folder/directory (under src folder), I have few variables like this in mobile-first approach, I want to change the values of the variables in media queries as Iam working on a responsive design:

$font-1: normal normal normal 48px/48px Arial;
$font-2: normal normal 300 38px/38px Roboto;

@media screen and (min-width: 768px) {
  $font-1: normal normal normal 56px/56px Arial;
  $font-2: normal normal 300 48px/48px Roboto;
}

In my angular component's .scss file, I have included the scss file & I have some classes

@import 'fonts';

.title1 {
    font: $font-1;
  }

.title2 {
    font: $font-2;
  }

and in my component's .html file, I have this code.

<h1 class="title1">Title</h1>
<h2 class="title2">Sub-Title</h2>

In angular.json I have added this as I have .scss files in 'styles' folder/directory.

"stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            },

In index.html, I have added this in head section

<meta name="viewport" content="width=device-width, initial-scale=1" />

The problem I am facing is, the variables $font-1 and $font-2 are working but the values inside media queries are not working/reflecting. Any mistake I am doing here?

UPDATE: I even tried creating a mixin like this:

@mixin breakpoint($min-bp) {
    @media (min-width: $min-bp) {
      @content;
    }
}

Included it in fonts.scss like this:

 @include breakpoint('768px') {
     $font-1: normal normal normal 56px/56px Arial;
     $font-2: normal normal 300 48px/48px Roboto;
  }

But still it did not work.

user1199842
  • 151
  • 2
  • 14
  • 1
    that's a known one!, even `css` variables don't work inside the media screen, **so `scss` also won't work** – Neptotech -vishnu Feb 06 '22 at 10:06
  • Scss generates normal css compile time. Media queries are runtime. So your mixin (in your update) actually generates the media query. So remove that media query from the mixin and it should work fine. – MikeOne Feb 06 '22 at 10:37
  • 1
    @MikeOne Then how it will come to know and to which breakpoint it will apply the changes without specifying any breakpoint to media query? – user1199842 Feb 06 '22 at 10:46
  • 2
    The problem is, you’re trying to set variables inside the media query - that won’t work as this is a compile time. You need to set your actual properties inside the media query (i.e. font: $font1). – MikeOne Feb 06 '22 at 10:53
  • 1
    @MikeOne ok I understand, but I have many variables differing in different breakpoints, so it will make my life harder. So looking for a better approach. – user1199842 Feb 06 '22 at 11:06

2 Answers2

3

I ran into the same issue, trying to make the new @container query work (same syntax as the @media queries). I managed to get it working by wrapping the SCSS variable in #{...}:

  $breakpoint: $gapSize + $itemSize * 2;

  @container sqformgridcontainer (min-width: #{$breakpoint}) {

  }

Unfortunately in VSCode (v1.73.1, nov 2022), this is reported as an error (scss-(css-ruleorselectorexpected)), while it compiles and runs just fine.

Michel Reij
  • 181
  • 1
  • 6
-2

Check in the config if root is already specified

{
...
"apps": [{
    "root": "src",
    ...
    "stylePreprocessorOptions": {
        "includePaths": [
          "./styles"
        ]
    }
    
}]

}

If the root is already src, then you just need to remove src/styles and replace it with ./styles

Marvin Delroy Aroza
  • 87
  • 3
  • Actually, SCSS is working fine so this is also specified in angular.json by default. Only the media query is not working. – user1199842 Feb 06 '22 at 10:36