Using Sass in Visual Studio Code

 Sass is a great way to make your .css in a more structured way that is easier to maintain. The upstrean version is made in Ruby, but here is many other versions written in other languages. I want to use libsass writen in C++ and the python-libsass python bindings there can be run from a commandline.
I like to keep the requirements for my projects down, and Ruby or Node need a lot of packages to make Sass work and I need something that can be used for creating .css for Gtk applications, that can be build into packages and Node & Ruby will add a lot of unneeded requirement just to use Sass for non-web applications.

Installation (Fedora 34)

sudo dnf install python3-libsass

Visual Studio Code setup

For each project make a .vs-code/tasks.json with the following content:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build CSS from Saas ",
            "type": "shell",
            "command": "/usr/bin/pysassc -t expanded ${file} ${workspaceFolder}/css/${fileBasenameNoExtension}.css",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "never"
              }            
        }
    ]
}

It make it possible to build the current open <filename>.scss file into an /css/<filename>.css using Ctrl-Shift-B ( Terminal -> Run Build Task)