You will need two things:

  • tasks.json file
  • Blade Runner extension for VS CODE

Start by creating .vscode folder in your project.

Then in it create tasks.json file with the following content:

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["--watch", "."],
    "showOutput": "always"
}

Now, after opening the project you can run the task by clicking Ctrl+Shift+B.

To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner

Blade Runner will run the task automatically after opening the project :)

Answer from gabrieln on Stack Overflow
๐ŸŒ
Visual Studio Code
code.visualstudio.com โ€บ docs โ€บ languages โ€บ css
CSS, SCSS and Less
November 3, 2021 - Visual Studio Code has built-in support for editing style sheets in CSS .css, SCSS .scss and Less .less. In addition, you can install an extension for greater functionality. Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you.
Top answer
1 of 5
9

You will need two things:

  • tasks.json file
  • Blade Runner extension for VS CODE

Start by creating .vscode folder in your project.

Then in it create tasks.json file with the following content:

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["--watch", "."],
    "showOutput": "always"
}

Now, after opening the project you can run the task by clicking Ctrl+Shift+B.

To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner

Blade Runner will run the task automatically after opening the project :)

2 of 5
4

A solution without additional extensions

With sass

Assuming you have sass installed globally with for instance:

npm install -g sass

Open the folder and create a task.json file under .vscode containing

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
    {
        "label": "Watch Sass",
        "type": "shell",
        "command": "sass --watch src/style.sass styles/style.css --style=compressed",
        "problemMatcher": [],
        "group": {
            "kind": "build",
            "isDefault": true
        },
        "runOptions": {
            "runOn": "folderOpen"
        }
    }]
}

With node-sass

Replace sass with node-sass in the above.

In both cases make sure the source/destination filename, location and extension are correct (in my case src/style.scss and style/style.css)

With a Workspace file

Or copy the section in your .vscode-workspace file to avoid clutter of .json files.

Make sure to change the sass source and destination files to your personal needs.

Setup VSCode

[EDIT] whith the current version this is asked the first time you open the workspace file and the following steps are no longer needed. To a llow automatic run tasks

  1. Ctrl+Shift+P
  2. select Manage automatic Tasks and
  3. select Allow Automatic Tasks in Folder and
  4. close and reopen your folder (or Workspace)

The sass compiler will be called and starts watching all your edits with a reassuring:

Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.

or with error messages when compilation failed.:

Error: semicolons aren't allowed in the indented syntax.
  โ•ท
7 โ”‚     padding: 0;
  โ”‚               ^
  โ•ต
  css\src\_base.sass 7:12  @import
  css\src\style.sass 1:9   root stylesheet

EDIT command and args can be separated

{
    "label": "Compile sass",
    "type": "shell",
    "command": "sass",
    "args": [
        "--watch",
        "--style=compressed",
        "./style/src/main.sass",
        "./style/main.css"
    ],
    "runOptions": {
        "runOn": "folderOpen"
    }
},
๐ŸŒ
Visual Studio Marketplace
marketplace.visualstudio.com โ€บ items
scss-to-css - Visual Studio Marketplace
Extension for Visual Studio Code - ๐Ÿ”ฅ The easiest way to compile scss file to css. And autoprefixer at the same time.
๐ŸŒ
Bangtech
data.bangtech.com โ€บ web โ€บ how-to-compile-your-sass-to-css-in-visual-studio-code.htm
How To Compile Your SASS/SCSS To CSS In Visual Studio Code
Sass is a CSS preprocessor with enhancements to the CSS syntax. Sass imports and mixings allows us to re-use codes and maintain a larger codebase. ... Close Visual Studio and wait for the installer to appear. Follow the steps to install the extension. Create a file named style.scss in the wwwroot ...
๐ŸŒ
Medium
medium.com โ€บ @codingcarter โ€บ how-to-compile-scss-code-in-visual-studio-code-c8406fe54a18
How to Compile SCSS Code in Visual Studio Code | by Coding Carter | Medium
January 24, 2020 - Hello, world and in this tutorial I will be showing you how to compile your SCSS code into CSS using a Visual Studio Code Extension in real time! After you save the .scss file, it will automatically generate the .css file for you! The extension was made by Ritwick Dey, a developer with over 4.3 million downloads on his various extensions on the Visual Studio Marketplace.
๐ŸŒ
GitHub
github.com โ€บ ramya-rao-a โ€บ vscode-sasshelper
GitHub - ramya-rao-a/vscode-sasshelper: VSCode extension that helps converting css to scss and to use mixins ยท GitHub
Convert your css to scss by extracting mixins and nesting rules and properties in scss files in Visual Studio Code using the Sass Helper.
Starred by 11 users
Forked by 4 users
Languages ย  TypeScript 93.0% | CSS 7.0%
๐ŸŒ
Coding Campus
codingcampus.net โ€บ home โ€บ how to compile sass/scss to css in visual studio code
How to Compile SASS/SCSS to CSS in Visual Studio Code - Coding Campus
December 2, 2022 - For example, I am entering the following code: .card { position: relative; background-color: red; .card__name { background-color: blueviolet; } Click on the Watch Sass button from the Status bar at the bottom of VS Code.
๐ŸŒ
YouTube
youtube.com โ€บ watch
Convert Multiple SCSS Files into One CSS Easily | Best Visual Studio Code Extensions - YouTube
Compile all SASS or SCSS files into one CSS files and convert individual SCSS files into relative CSS files also. On demand or as you save files. Just save o...
Published ย  May 26, 2022
๐ŸŒ
Medium
medium.com โ€บ @coadams9 โ€บ css-to-scss-1430c1692556
CSS to Scss!!. When I first started to learn how toโ€ฆ | by Cory Adams | Medium
October 10, 2019 - What follows is some of what Iโ€™ve learned over time. One thing I have to mention is the vs code extension โ€œLive Sass Compilerโ€. This extension takes your Scss and maps it to CSS!
Find elsewhere
๐ŸŒ
YouTube
youtube.com โ€บ mr coder
How To Compile SASS To CSS In VSCode | The Easiest Way! - YouTube
Web browsers can't run SASS/SCSS files directly. So, it needs to be compiled into regular CSS. We usually do it by command prompt. But switching to the code ...
Published ย  November 28, 2020
Views ย  5K
๐ŸŒ
Quora
quora.com โ€บ How-do-I-connect-a-SASS-file-to-a-CSS-file-in-VScode
How to connect a SASS file to a CSS file in VScode - Quora
Answer (1 of 2): Do you mean how to convert a Sass file to a CSS file? The best option is to use a build tool like Gulp/Grunt. You can also use module bundlers like Webpack or Parcel but, I think, that would be overkill.
๐ŸŒ
Visual Studio Marketplace
marketplace.visualstudio.com โ€บ items
Live Sass Compiler - Visual Studio Marketplace
Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime with live browser reload.
๐ŸŒ
YouTube
youtube.com โ€บ watch
How to use SCSS in VS Code - YouTube
Live Sass compiler is A VS Code Extension that helps you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reloadinstagram...
Published ย  September 23, 2022
๐ŸŒ
YouTube
youtube.com โ€บ watch
Auto Convert SCSS to CSS & Minify from VS Code | Old Browsers Compatible Output - YouTube
Convert SCSS into CSS & minified CSS with prefixed code that is older browser compatible. Compile SCSS into css automatically on each file save. SASS or SCSS...
Published ย  February 9, 2021
๐ŸŒ
MDBootstrap
mdbootstrap.com โ€บ standard โ€บ material design for bootstrap 5 & vanilla javascript
Compiling SCSS to CSS in Visual Studio Code - Material Design for Bootstrap
Expected behavior I am trying to compile the mdb.scss file into a mdb.css file using Visual Studio Code and Live Sass Compiler extension.
๐ŸŒ
CSS Portal
cssportal.com โ€บ css-to-scss
CSS to SCSS Converter - CSS Portal
Simply enter your CSS code into the textbox below and click on convert, your SCSS code will then be available for download or you can copy to the clipboard.
๐ŸŒ
Testmu
testmu.ai โ€บ home โ€บ free tools โ€บ scss to css converter
SCSS to CSS Converter | TestMu AI
Step 3: Subsequently, click the "Convert" button once the SCSS code has been successfully transposed into the converter's input window. Step 4: Take a moment to meticulously review the resulting CSS code.
๐ŸŒ
Visual Studio Marketplace
marketplace.visualstudio.com โ€บ items
HTML to CSS / LESS / SCSS - Visual Studio Marketplace
Extension for Visual Studio Code - Copy HTML code and paste it as CSS / LESS / SCSS selectors code
๐ŸŒ
Visual Studio Marketplace
marketplace.visualstudio.com โ€บ items
CSS selector to SCSS - Visual Studio Marketplace
Extension for Visual Studio Code - Converts an CSS selector or rule into nested SCSS
๐ŸŒ
Read the Docs
vscode-docs.readthedocs.io โ€บ en โ€บ latest โ€บ languages โ€บ css
Css - vscode-docs
Hovering over a selector or property will provide an HTML snippet that is matched by the CSS rule. This is supported for Sass and Less variables in the same file. Note: Cross file references ('imports') are not resolved. VS Code can integrate with Sass and Less transpilers through our integrated task runner. We can use this to transpile .scss or .less files into .css files.