Flask and Sass: A Better Understanding and More Control

Use sass, update css, and bootstrap without npm

Figure 1 Watch for changes in .scss without npm

The goal of this article is to share a method that offers more agency over your sass and css connection inside your web application. I am a Flask user, but this may still be useful for someone using another framework.

If you’re anything like me, you may have been using npm to handle importing sass, bootstrap and updating your css from your sass. This works well and in fact I have another article that explains how to do that.

Recently, I came across an error in my “sass terminal”, which is just a terminal that I dedicate to run the sass command to watch for changes and update the css.

The error didn’t seem to affect my website, but it was an eye sore, so I investigated. In doing so I developed a better understanding of how Sass works, which has prompted me to document and ultimately share this process here.

Sass only needs to be installed once

Just as I’ve installed npm and can use the npm command anywhere via my terminal, I can install Sass once and use it anywhere.

This might not be a game changer for you, but this bit of knowledge changed my understanding of what Sass is doing. It’s not just a package like bootstrap. It’s a language.

To install, you can go directly to the website and see the command:

Code Snippet 1 Install sass globally on your computer

npm install -g sass

You’ll notice I’m using Node Project Manager (npm) for this step, so you need it here, but that’s it for this article.

The “-g” means global. After learning that I typed sass in my terminal not in my static folder initialized by npm and found a bunch of commands.

Sass compiling and watching command

When I was using node to run the compiling and do more of the package managing, I would open a terminal and navigate into my static directory. Then type “npm compile_sass” which would then dedicate the terminal to watching for changes to any of my custom .scss files in the /static/scss/ directory.

My npm package.json file would contain this bit of code:

Code Snippet 2 run sass compiler with npm

  "scripts": {
    "compile_sass": "sass --watch scss:css"
  },

Which produced a terminal that looked a like Figure 2 and update with saves or errors:

Figure 2 Terminal dedicated to watching for updates to my main.scss file (old way)

Here is a look at my typical folder structure for my flask applications:

Figure 2 My Typical Flask App Folder Structure (in past with node_modules)

The dot could be any name like “MyAppProject” or “MyWebsite”. You can call this anything.

“app_package” is the name of the directory that contains all my routes, static, templates, __init__.py, etc. But you can call it anything.

I sort of understood what was going on but I wasn’t sure where the heavy lifting was coming from. Now its clearer to me that npm is just calling sass.

While this may still be useful to use npm, we do not need to use npm. We can just use sass directly.

How I do things now

With sass installed globally, I can now navigate into my /static directory, like I have been, but instead type:

sass --watch scss/main.scss:css/main.css

This will produce the same watching and compiling of my sass to .css shown in Figure 1.

The css directory will either get updated if it exists or if will get created and the main.css will get compiled with all the main.scss stuff.

I can run the command from anywhere I just need to have the proper folder paths referenced in the “sass –watch” command.

Now that I don’t use npm to install Bootstrap, here is the folder structure I use now:

Figure 3 My New Flask App Folder Structure (w/out node_modules)

What about Bootstrap?

Great question… up to this point, I have been recklessly adding .js, .css, jquery and bootstrap files into my static folder just to get stuff to work. But now things are becoming a little clearer. What I can do with bootstrap is download the latest version and include a reference to bootstrap.scss file in my _custom.scss file. The bootstrap.scss file comes with the downloaded Bootstrap package.

First download here: https://getbootstrap.com/docs/5.2/getting-started/download/

This returns a zipped file I unzip and stick it in my static directory.

Next, inside my _custom.scss I have this:

Code Snippet 3 Add Bootstrap package to my custom .scss/.css

@import "../bootswatch/variables";
@import "../bootstrap-5.2.3/scss/bootstrap.scss";
@import "../bootswatch/bootswatch";

In the middle is the bootstrap.scss file that gets read into my custom css. Bootswatch is an additional theme that I’ve grown accustomed to using. It’s simple and an easy way for me to change color schemes. You don’t need it.

Then in the main.scss I do this at the very top:

Code Snippet 4 Include the _custom.scss and other partial files in my main.scss

@use "custom";
@use "navbar";
@use "users";
@use "admin";

You’ll see “custom” is how I import the _custom.scss file into the main scss file. Sass files with an underscore ahead of them are called partials. I also have partials for my navbar and users blueprint and admin blueprint. If you want to see an example of this I have a github repo with this framework here: https://github.com/costa-rica/dashAndData07.