Sass mixiny nie działają

robię prostą stronkę html + scss i gdy próbuję dodać mixina to pokazuje mi się

w outpucie mam to:

l10n: Configured to file:///c%3A/Users/Admin/.vscode/extensions/ms-ceintl.vscode-language-pack-pl-1.77.2023040509/translations/extensions/vscode.css-language-features.i18n.json
[Error - 19:53:16] Request textDocument/documentSymbol failed.
Error: name must not be falsy
	at b.validate (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:26039)
	at new b (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:26334)
	at V (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:218165)
	at c (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:256165)
	at t.map (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:256251)
	at Object.asDocumentSymbols (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:225983)
	at i (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:164601)
	at async t.provideDocumentSymbols (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:100:39308)
[Error - 19:53:16] Request textDocument/documentSymbol failed.
Error: name must not be falsy
	at b.validate (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:26039)
	at new b (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:26334)
	at V (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:218165)
	at c (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:256165)
	at t.map (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:256251)
	at Object.asDocumentSymbols (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:225983)
	at i (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:164601)
	at async t.provideDocumentSymbols (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:100:39308)
[Error - 19:57:33] Request textDocument/documentSymbol failed.
Error: name must not be falsy
	at b.validate (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:26039)
	at new b (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:26334)
	at V (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:218165)
	at c (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:256165)
	at t.map (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:256251)
	at Object.asDocumentSymbols (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:225983)
	at i (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\css-language-features\client\dist\node\cssClientMain.js:1:164601)
	at async t.provideDocumentSymbols (c:\Users\Admin\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:100:39308)

MIMO TO MIXIN DZIAŁA, CO MOGĘ Z TYM ZROBIĆ?

Na rok 2023 (zasłyszane) SASS jest niecelowy, praktycznie wszystko jest w standardzie CSS

Pokaż kod

Riddle napisał(a):

Pokaż kod

kod index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/css/main.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
</head>
<body>
    <table class="tabelka">
        <tr><th><h1>Nagłówek kolumny <span>1</span></h1></th><th><h1>Nagłówek kolumny <span>2</span></h1></th></tr>
        <tr><td>Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td></tr>
        <tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td></tr>
        </table>
        <button class="x">sad</button><br>
        <button class="ds">kdsf</button>
        <button class="dd">kekw</button>
</body>
</html>

kod package.json

{
  "name": "sass",
  "version": "1.0.0",
  "description": "prosta strona do nauki sassa",
  "main": "index.js",
  "scripts": {
    "compile:sass": "sass --watch style/scss:style/css"
  },
  "keywords": [
    "sass"
  ],
  "author": "superuserek",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.4.14",
    "bootstrap": "^5.2.3",
    "fontawesome": "^5.6.3",
    "sass": "^1.62.1"
  }
}

kod main.scss

@import "joua";
@import "doimportu";
// zmienne
$bgcolor: rgb(208, 208, 208);
$h1color: green;
body
{
background-color: $bgcolor;
}

// zagnieżdżanie
.tabelka, th, td
{
border: 1px white solid;
h1
{
color: green;
span
{
font-weight: normal;
}
}
}

//mixiny
@mixin dsads
{
color: palevioletred;
}
.x
{
@include dsads;
}

//import include etc
// w pliku doimportu.scss i joua.scss

//ify i else
.dd
{
@if body background-color == cornflowerblue
{
border: 3px dotted brown;
}
@else
{
border: 3px dotted yellow;
}
}

//prosze pomoz mi tez z tym ifem i elsem powyzej, nie dziala,jak zmieniam backgrond-color na inny niz cornflowerblue to  border nie zmienia koloru

kod doimportu.scss

$hejcia: rgb(35, 180, 120);

@mixin lo
{
background-color: red;
}

kod joua.scss

@import "doimportu";
.ds
{
color: $hejcia;
@include lo;
}