SCSS : Why is this code not compiled in extention "Dart JS sass" at first time. After quit and restart Visual Stadio Code,it can naturaly compiled

Question

SCSS : Why is this code not compiled in extention "Dart JS sass" at first time.Code was saved and compile with watch.But always it can't be compiled. After quit and restart Visual Stadio Code,it can be naturaly compiled. I don't know why it nessesory to restart Visual Stadio Code.

This is scss code.

@use "bases" as m; 
#top {
.header-top-left {
    h1 {
        display: inline-block;
        padding-right: 20px;
        font-size: 10px;
        @include m.tab {
            font-size: 9px;
            height: 24px;
            line-height: 24px;
        }
        @include m.sp {
            padding: 0;
        }
    }
}

This is "bases" as m.'s code.

@mixin tab{  @media screen and (max-width: ($tab)) 
{
@content;  
}
}

This is css error code.

    Error: Invalid CSS after "          @include m": expected "}", was ".tab {"
        on line 12 of /Users/***/Desktop/***/***/***/scss/top.scss

7:  .header-top-left {
8:      h1 {
9:          display: inline-block;
10:             padding-right: 20px;
11:             font-size: 10px;
12:             @include m.tab {
13:                 font-size: 9px;
14:                 height: 24px;
15:                 line-height: 24px;
16:             }
17:             @include m.sp {

Backtrace:
/Users/***/Desktop/***/***/***/scss/top.scss:12

This is package.json's code.

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "sass": "sass scss/:css/ --no-source-map --watch"
  },
  "author": "***",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.49.11"
  }
}

This is setting.json's code.

{
    "dartsass.targetDirectory": "css",
    "dartsass.sassBinPath": "/Users/***/node_modules/sass/sass.js",
    "dartsass.disableCompileOnSave": false
}