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 OverflowYou 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 :)
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
- Ctrl+Shift+P
- select Manage automatic Tasks and
- select Allow Automatic Tasks in Folder and
- 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"
}
},
I used to do a lot of front end work but have been out of the game for a while and am just starting to get back into it. Years ago I remember using Node.js to watch and compile my scss files into css. What's the preferred (easiest) method these days? I'm finding a lot of different solutions online at this point and it seems there's even extensions available for VSCode that basically handle it for you.
Also... one thing I seem to be completely drawing a blank on, what's the ideal process to set this up for multiple projects? Is it even possible to set it and forget it for multiple projects or by nature, will you always have to run some code or do some button pressing while you're working to get the compiler to watch for code changes? That's one piece I just can't remember how I did it before.
Hey,
Im trying to get into SASS partials lately. I use .sass files and not the more popular .scss.
My IDE is VS Code and I use these 3 extensions :
Live Sass Compiler ( Glenn Marks )
Live Server
Sass (.sass only)
Sass (.sass only) helps mainly with syntax highlighting and some autocomplete, but it lacks some basic other key features like being able to autocomplete variables, mixins and co that are in other partial files and 'imported' with \@forward and \@use and being able to Ctrl + Click on these variables to 'go to' the spot where they are declared.
I tested numerous other extensions but they only work for .scss files and don't support .sass.
The one that does what I want is SCSS IntelliSense, but sadly only works for .scss files.
Do some of you know of any extension that is the equivalent of SCSS IntelliSense for .sass ?
Or is there an other way to have all these features ?