SCSS structure

We have used 7-1 tire scss folder structure in our template

And to compile the scss files we have used libsass.

Follow the below given steps if you want to use scss for styling you site.

Step 1: Install Libsass

Install libsass by using the below given command.

pip install libsass

step 2: Check Libsass

Make sure that it is installed using this command:

pip show libsass

Step 3: Configuration in __init__.py

Now that we have install libsass, we need to configure it to access the scss files and convert and paste it in some destination file. To do that , add these code in __init__.py file.

from sassutils.wsgi import SassMiddleware
app = Flask(__name__)
app.wsgi_app = SassMiddleware(app.wsgi_app, {
  'cuba': ('static/assets/scss', 'static/assets/css', '/static/assets/css')
})

Here Cuba is the name of the folder containing __init__.py file. static/assets/scss being the path of the folder that contains the scss files and static/assets/css and /static/assets/css being the path of the file where the compiled css will be pasted.

Step 4: Using Scss Files in html

We have now configured our project to use scss files, now where we add the link in html file, we have to add it in this way:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/style.scss.css')}}" />