nicholasliang / django-2.x-sass

Django sass processor tutorial

Django sass processor tutorial (Django 2.x)

This repo is using Python 3.7.2 with Django 2.2. No license and feel free to make it as your starter.

Install the requirement

By requirement.txt:

python -m pip install -r requirements.txt

By pip

python -m pip install django==2.2 libsass==0.17.0 django_compressor==2.2 django-sass-processor==0.7.2

Run the Web App

python manage.py runserver

and open your favourite broswer to go to

localhost:8000

Explanation

setting.py

Put the 'sass_processor' into INSTALLED_APPS

INSTALLED_APPS = [
    ....
    'sass_processor', # add the processor here
]

Set the path of sass/scss files in STATICFILES_DIRS

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    os.path.join(BASE_DIR, 'sass_folder'),
    ...
]

Set the path to store the generated css and css.map

SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')

views.py

standard views files to render the page

from django.shortcuts import render

def index(request):
    """ index page """
    return render(request, 'index.html', {})

urls.py

add the views to the page

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index),
]

templates/index.html

Load the sass_tags by

{% load sass_tags %}

Import the sass/scss file with html tag

<link rel="stylesheet" href="{% sass_src 'main.scss' %}" />

The Django block {% sass_src "<name>.scss" %} is trying to get the <name>.scss file from STATICFILES_DIRS directories and generate a <name>.css and <name>.css.map into the SASS_PROCESSOR_ROOT

Reference: https://github.com/jrief/django-sass-processor/blob/master/sass_processor/processor.py

# django-sass-processor/sass_processor/processor.py
def __init__(self, path=None):
  self._path = path
  nmd = [d[1] for d in getattr(settings, 'STATICFILES_DIRS', [])
  if isinstance(d, (list, tuple)) and d[0] == 'node_modules']
  self.node_modules_dir = nmd[0] if len(nmd) else None

Reference: https://github.com/jrief/django-sass-processor/blob/master/sass_processor/finders.py

# django-sass-processor/sass_processor/finders.py
class CssFinder(FileSystemFinder):
  """
  Find static *.css files compiled on the fly using templatetag `{% sass_src "" %}`
  and stored below `SASS_PROCESSOR_ROOT`.
  """

sass_folder/main.scss

as example:

body {
  background-color: black;
}
h1{
    border: 1px red;
    color: white;
}
.container {
  > ul {
    list-style: none;
    li {
      color: orange;
      &:last-child{
        color: blue;
      }
      &:after{
        clear: both;
      }
    }
  }
}

django-2.x-sass's Issues

Security Version Update from Github Alert

Remediation
Upgrade django to version 2.0.10 or later. For example:
django>=2.0.10
Always verify the validity and compatibility of suggestions with your codebase.

Details
CVE-2019-3498
More information
low severity
Vulnerable versions: >= 2.0.0, < 2.0.10
Patched version: 2.0.10
In Django 1.11.x before 1.11.18, 2.0.x before 2.0.10, and 2.1.x before 2.1.5, an Improper Neutralization of Special Elements in Output Used by a Downstream Component issue exists in django.views.defaults.page_not_found(), leading to content spoofing (in a 404 error page) if a user fails to recognize that a crafted URL has malicious content.
CVE-2018-14574
More information
moderate severity
Vulnerable versions: >= 2.0, < 2.0.8
Patched version: 2.0.8
django.middleware.common.CommonMiddleware in Django 1.11.x before 1.11.15 and 2.0.x before 2.0.8 has an Open Redirect.