css sassのメディアクエリが効かない

htmlとsassを使いモバイルファーストでサイトの模写をしていているのですがメディアクエリが効きません。
どうすればメディアクエリが効くようになるでしょうか？
考えられる原因など教えていただければ幸いです。
viewportの記述は出来ています。
headのコードと@mediaのコードを載せておきます。

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Progate</title> <link rel="stylesheet" href="css/stylesheet.css"> </head>

メディアクエリ
.eyecatch {
padding-top: 180px;
margin: 0 15px;
h1{
font-size: 24px;
color:white;
opacity: 0.7;
letter-spacing: 5px;
@include pc {
background-color: red;
}
}
}

$pc: 1024px; // PC

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

行動規範の内容に同意します

回答1件

ベストアンサー

書く順番だと思います。変数や「@mixin」は先に書く必要がありそうです。

SCSS
1// 先に書く
2$pc: 1024px; // PC 
3
4@mixin pc {
5  @media (min-width: ($pc)) {
6    @content;
7  }
8}
9
10// あとに書く
11.ecatchey {
12  padding-top: 180px;
13  margin: 0 15px;
14  h1 {
15    font-size: 24px;
16    color: white;
17    opacity: 0.7;
18    letter-spacing: 5px;
19    @include pc {
20      background-color: red;
21    }
22  }
23}