LuN4t1k0/input.scss

## input.scss
$color: green;

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap : 10px;


}

div {
    @extend  .grid;
    background-color : $color;
}

## markup.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, qui iure, in perferendis quam quae amet voluptatum rem magnam voluptatibus consequatur molestiae expedita iste minus exercitationem ex porro quas debitis.</p>
  <p>Vero quas mollitia, debitis dolores optio eligendi. Voluptatum optio ad iusto fugiat ut est, asperiores vel at fuga, obcaecati numquam animi laboriosam labore sequi maiores. Exercitationem tempore totam eaque id.</p>
  <p>Amet laboriosam labore veritatis architecto est velit tempore nihil! Quis nesciunt velit quos a, ullam quidem repellat veritatis ipsa enim nihil possimus soluta similique, autem porro corporis rem culpa eaque.</p>
  <p>Nesciunt, iure? Minima tempore dignissimos, officia quas dolor qui. Alias sequi voluptates obcaecati, assumenda aliquam suscipit? Excepturi suscipit maxime officia officiis ea dolores reiciendis? Voluptates quisquam consequuntur alias assumenda est.</p>
</div>

</body>
</html>

## output.css
.grid, div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

div {
  background-color: green;
}

## settings.json
{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}
	$color: green;

	.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap : 10px;


	}

	div {
	@extend .grid;
	background-color : $color;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
	</head>
	<body>
	<div>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, qui iure, in perferendis quam quae amet voluptatum rem magnam voluptatibus consequatur molestiae expedita iste minus exercitationem ex porro quas debitis.</p>
	<p>Vero quas mollitia, debitis dolores optio eligendi. Voluptatum optio ad iusto fugiat ut est, asperiores vel at fuga, obcaecati numquam animi laboriosam labore sequi maiores. Exercitationem tempore totam eaque id.</p>
	<p>Amet laboriosam labore veritatis architecto est velit tempore nihil! Quis nesciunt velit quos a, ullam quidem repellat veritatis ipsa enim nihil possimus soluta similique, autem porro corporis rem culpa eaque.</p>
	<p>Nesciunt, iure? Minima tempore dignissimos, officia quas dolor qui. Alias sequi voluptates obcaecati, assumenda aliquam suscipit? Excepturi suscipit maxime officia officiis ea dolores reiciendis? Voluptates quisquam consequuntur alias assumenda est.</p>
	</div>

	</body>
	</html>
	.grid, div {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	}

	div {
	background-color: green;
	}
	{
	"sass": {
	"compiler": "dart-sass/1.32.12",
	"extensions": {},
	"syntax": "SCSS",
	"outputStyle": "expanded"
	},
	"autoprefixer": false
	}