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)

Comments

Post a Comment

Popular posts from this blog

Pimp your Gtk application with CSS

Image
  GTK is a powerful framework for building GUI application in Linux and other OSes. It is written in C, but there is binding for many programing languages like Python. GTK uses a subset of CSS for styling your application. I have made a little Python Demo Application to show how to pimp your application like a pimp. It shows the basics of how to use a CSS file with GTK python bindings and  the basics of how to write custom styling in CSS for your GTK application.  It is not meant to be good looking 😊, but to show how the styling works. It shows the basics like colors, padding, margins, borders etc, but also more advanced features like transitions and animations.
Read more

Yum Extender is very keyboard friendly

   It has been a design goal to make Yum Extender NextGen very keyboard friendly, not just having keyboard shortcuts, but also have a effective workflow. Fedora packages https://copr.fedorainfracloud.org/coprs/timlau/yumex-ng/ Development site https://github.com/timlau/yumex-ng
Read more

Yum Extender - Rises Like a Phoenix

Image
Yum Extender (yumex-dnf) as retired 5 years ago from Fedora, as I did not have the time to handle development. Back in May 2021 i started up the development up again on yumex-dnf. One month ago, I started a new project yumex-ng https://github.com/timlau/yumex-ng It is a rewrite of Yum Extender from scratch as a more modern application using gtk4, libadwaita and Python 3.11. Today I made the first development release, package is available for Fedora 37 and Rawhide in Fedora Copr I'm very pleased of the current state for the application, so try it out at let me know what you think. You can track the development on my Mastodon profile.
Read more