sassファイルが、CSSにコンパイルされず困っております。

sassでコードを書き、cssファイルが生成されないのはなぜしょうか。（live sass compilerで、watch sassを押して保存しても生成されない）

エラーが出ており、

Error: unclosed parenthesis
        on line 10 of sass/Users/remina/Desktop/The company/sass/stlyle.scss
>>   "tab": "(min-width: 768px) and (max-width: #{$layout-width-inner})",

   --^

エラーが出てる１０行目が以下なのですが。

  "tab": "(min-width: 768px) and (max-width: #{$layout-width-inner})",

タグ閉じてるので、間違っているようにも思えず。
vs code とmac os の更新など色々試しましたが解決できず。

あと、sassを利用すると少しでもエラーがあるとcssが生成されないものなのでしょうか？
だとすると不便だなぁと感じ。。

どなたかお助けいただけますと幸いです><

こちらが、stlyle.cssに記載のすべてのコードです

$color-main:#3F51B5;
$color-accent:#E81919;
$color-text:#333333;

$layout-width-inner: 1200px;

// ブレークポイント
$breakpoints: (
  "sp": "(max-width: 767px)"
  "tab": "(min-width: 768px) and (max-width: #{$layout-width-inner})",
  "pc": "(min-width: #{$layout-width-inner} )",
);

// メディアクエリー
@mixin mq ($breakpoints: sp) {
@media #{map-get($breakpoints, $breakpoints)} {
@content;
}
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

.inner {
  width:$layout-width-inner;
  max-width: 100%;
  margin: 0 auto;
}

.header{
background: $color-main;
height: 100%;


}

HTIMのコード

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
  <div class="header_inner inner">
    <h1 class="header_logo"><a href="/"><img src="img/logo.png" alt="" srcset=""></a></h1>
    <ul class="header-nav">
      <li><a href="">Card</a></li>
      <li><a href="">News</a></li>
      <li><a href="">Price</a></li>
      <li><a href="">Access</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>

</header>
  
</body>
</html>