sccs をcssに反映させたい

前提・実現したいこと

sccs をcssに反映させたいです。

発生している問題・エラーメッセージ

vs code のdartJS SASS compiler and SASS warcher(拡張機能)で以下のエラーが表示されます。

Error: style.scss: 97:79 Error: expected "(". ╷ 97 │ background-image: url(img/hero_iphone_13pro__dhnsegysa42u_small_2x\ 2.jpg); │ ^ ╵ Users/higuchiharuki/Desktop/apple 模写/style.scss 97:79 root stylesheet

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Apple</title>
8
9  <!--リセットcss-->
10 
11  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
12/>
13  <link rel="stylesheet" href="style.css">
14
15  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
16  <!--bootstrap-->
17  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
18
19
20</head>
21<body>
22  <!--header-->
23  <header> 
24    <ul>
25      <li class="header__border">
26        <div></div>
27      </li>
28      <li>
29        <a href="https://www.apple.com/jp/"><i class="fab fa-apple fa-2x"></i></a>
30      </li>
31      <li class="header__item">
32        <a href="https://www.apple.com/jp/shop/goto/store">ストア</a>
33      </li>
34      <li class="header__item">
35        <a href="https://www.apple.com/jp/mac/">Mac</a>
36      </li>
37      <li class="header__item">
38        <a href="https://www.apple.com/jp/ipad/">iPad</a>
39      </li>
40      <li class="header__item">
41        <a href="https://www.apple.com/jp/iphone/">iphone</a>
42      </li>
43      <li class="header__item">
44        <a href="https://www.apple.com/jp/watch/">Watct</a>
45      </li>
46      <li class="header__item">
47        <a href="https://www.apple.com/jp/tv/">TV</a>
48      </li>
49      <li class="header__item">
50        <a href="https://www.apple.com/jp/music/">Music</a>
51      </li>
52      <li class="header__item">
53        <a href="https://support.apple.com/ja-jp">サポート</a>
54      </li>
55      <li class="header__logo">
56        <i class="bi bi-search"></i>
57      </li>
58      <li>
59        <i class="bi bi-bag" style="font-size: 20px;"></i>
60      </li>
61    </ul>
62  </header>
63  <main>
64     <h1>
65        <a href="https://www.apple.com/jp/shop/goto/shop">オンライン</a>で購入すると送料無料。配送は非接触。
66        <br>
67        スペシャリストのサポートなど魅力もいろいろ。
68     </h1>
69     <a href="https://www.apple.com/jp/iphone-13-pro/" class="main__menu  main__menu__one">
70        <h2>
71          iPhone 13 Pro
72        </h2>
73        <h3>
74          すべてがプロ。
75        </h3>
76        <div class="main__menu--link">
77          <object><a href="https://www.apple.com/jp/iphone-13-pro/">さらに詳しく</a> <i class="bi bi-chevron-right"></i></object>
78          <object><a href="">購入</a><i class="bi bi-chevron-right"></i></object>
79        </div>
80     </a>
81     <a href="https://www.apple.com/jp/iphone-13/" class="main__menu main__menu__two">
82      <h2>
83        iPhone 13 
84      </h2>
85      <h3>
86        できること、
87        <br>
88        超人的。
89      </h3>
90      <div class="main__menu--link">
91        <object><a href="">さらに詳しく</a><i class="bi bi-chevron-right"></i></object>
92        <object><a href="">購入</a><i class="bi bi-chevron-right"></i></object>
93      </div>
94    </a>
95     <a href="https://www.apple.com/jp/apple-watch-series-7/" class="main__menu main__menu__three">
96      <h2>
97        <i class="fab fa-apple"></i>WATCH
98      </h2>
99      <h3>
100        ビッグなニューフェイス。
101      </h3>
102      <p>
103        10月15日発売
104      </p>
105      <div class="main__menu--link">
106        <object><a href="">さらに詳しく</a><i class="bi bi-chevron-right"></i></object>
107        <object><a href="">購入</a><i class="bi bi-chevron-right"></i></object>
108      </div>
109    </a>
110  </main>
111  <main-sub>
112
113  </main-sub>
114  <footer>
115
116  </footer>
117</body>
118</html>

scss
1//breakpoint//
2$breakpoint-md: 768px !default;
3$breakpoints: (
4  'md': 'screen and (max-width: 768px)',
5) !default;
6
7@mixin mq($breakpoint: md) {
8  @media #{map-get($breakpoints, $breakpoint)} {
9    @content;
10  }
11}
12body{
13  font-family:"SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
14}
15.main__menu--link a:hover,h1 a:hover{
16  border-bottom: 1px solid #4081D5;
17}
18
19//header
20  header {
21    background-color: #333333;
22    color:#D6D6D5;
23    position: fixed;
24    width: 100%;
25    z-index: 2;
26    ul{
27      display: flex;
28      max-width: 1000px;
29      margin: 0 auto;
30      justify-content: space-between;
31      align-items: center;
32      padding: 12px 17px;
33      li a{
34        font-size: 12px;
35        color: #D6D6D5;
36      }
37      li a:hover,li:hover{
38        color: white;
39      }
40      .header__border{
41        border-top: 1px solid #D6D6D5;
42        border-bottom: 1px solid #D6D6D5;
43        height: 8px;
44        width: 18px;
45        display: none;
46      }
47      @include mq(md) { 
48        .header__item,.header__logo{
49          display: none;
50        }
51        .header__border{
52          display: block;
53        }
54      }
55    }  
56  }
57//main
58 main{
59   h1{
60     text-align: center;
61     padding: 60px 0 10px 0;
62     background-color: #F5F5F7;
63     font-size: 12px;
64     letter-spacing: 0;
65     line-height: 1.3rem;
66     a{
67       color: #4081D5;
68     }
69   }
70   .main__menu{
71     height: 500px;
72     text-align: center;
73     width: 100%;
74     h2{
75       font-size: 25px;
76       font-weight: bold;
77     }
78     h3{
79       font-size: 17px;
80       padding: 10px 0 15px 0;
81     }
82     .main__menu--link{
83       a{
84         font-size: 15px;
85         color: #4081D5;
86       }
87       .bi-chevron-right{
88         font-size: 11px;
89         color: #4081D5;
90         margin-right: 15px;
91       }
92     }
93   }
94   .main__menu__one{
95     display: inline-block;
96     padding: 40px 0 10px 0;
97     background-image: url(img/hero_iphone_13pro__dhnsegysa42u_small_2x\ 2.jpg);
98     background-position: center;
99     background-size: cover;
100   }
101   .main__menu__two{
102    display: inline-block;
103    padding: 190px 0;
104    background-image: url(img/hero_iphone_13__f194u1rdooeq_small_2x\ (1).jpg);
105    background-position: center;
106    background-size: cover;
107    h2{
108      color:whitesmoke;
109    }
110    h3{
111      color: #F3B9E1;
112      font-weight: 400;
113    }
114   }
115   .main__menu__three{
116     padding: 40px 0;
117     
118     background-position: center;
119     background-size: cover;
120     width: 100%;
121     h2::after{
122      content: 'SERIES 7';
123      color: #DD6767;
124      font-size: 11px;
125      display: block;
126      margin-top: 8px;
127      letter-spacing: 1.2px;
128     }
129     p{
130       display: inline-block;
131       margin-bottom: 15px;
132       font-size: 11px;    
133     }
134   }
135 }

css
1@charset "UTF-8";
2body {
3  font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
4}
5
6.main__menu--link a:hover, h1 a:hover {
7  border-bottom: 1px solid #4081D5;
8}
9
10header {
11  background-color: #333333;
12  color: #D6D6D5;
13  position: fixed;
14  width: 100%;
15  z-index: 2;
16}
17header ul {
18  display: -webkit-box;
19  display: -ms-flexbox;
20  display: flex;
21  max-width: 1000px;
22  margin: 0 auto;
23  -webkit-box-pack: justify;
24      -ms-flex-pack: justify;
25          justify-content: space-between;
26  -webkit-box-align: center;
27      -ms-flex-align: center;
28          align-items: center;
29  padding: 12px 17px;
30}
31header ul li a {
32  font-size: 12px;
33  color: #D6D6D5;
34}
35header ul li a:hover, header ul li:hover {
36  color: white;
37}
38header ul .header__border {
39  border-top: 1px solid #D6D6D5;
40  border-bottom: 1px solid #D6D6D5;
41  height: 8px;
42  width: 18px;
43  display: none;
44}
45@media screen and (max-width: 768px) {
46  header ul .header__item, header ul .header__logo {
47    display: none;
48  }
49  header ul .header__border {
50    display: block;
51  }
52}
53
54main h1 {
55  text-align: center;
56  padding: 60px 0 10px 0;
57  background-color: #F5F5F7;
58  font-size: 12px;
59  letter-spacing: 0;
60  line-height: 1.3rem;
61}
62main h1 a {
63  color: #4081D5;
64}
65main .main__menu {
66  height: 500px;
67  text-align: center;
68  width: 100%;
69}
70main .main__menu h2 {
71  font-size: 25px;
72  font-weight: bold;
73}
74main .main__menu h3 {
75  font-size: 17px;
76  padding: 10px 0 15px 0;
77}
78main .main__menu .main__menu--link a {
79  font-size: 15px;
80  color: #4081D5;
81}
82main .main__menu .main__menu--link .bi-chevron-right {
83  font-size: 11px;
84  color: #4081D5;
85  margin-right: 15px;
86}
87main .main__menu__one {
88  display: inline-block;
89  padding: 40px 0 10px 0;
90  background-image: url();
91  background-position: center;
92  background-size: cover;
93}
94main .main__menu__two {
95  display: inline-block;
96  padding: 190px 0;
97  background-position: center;
98  background-size: cover;
99}
100main .main__menu__two h2 {
101  color: white;
102}
103main .main__menu__two h3 {
104  color: #F3B9E1;
105  font-weight: 400;
106}
107main .main__menu__three {
108  padding: 40px 0;
109  background-position: center;
110  background-size: cover;
111  width: 100%;
112}
113main .main__menu__three h2::after {
114  content: "SERIES 7";
115  color: #DD6767;
116  font-size: 11px;
117  display: block;
118  margin-top: 8px;
119  letter-spacing: 1.2px;
120}
121main .main__menu__three p {
122  display: inline-block;
123  margin-bottom: 15px;
124  font-size: 11px;
125}
126/*# sourceMappingURL=style.css.map */

試したこと

Google developer で確認すると、

main .main__menu__one {
display: inline-block;
padding: 40px 0 10px 0;
background-image: url();
background-position: center;
background-size: cover;
}

と表示されています。

background-image: url();　　　のカッコ内が空白になっています。