Of Stack

Method steps for how to use sass in Django

  • 2021-07-10 20:22:46
  • OfStack

As an operation and maintenance development, unlike business development, which only focuses on back-end business development, it is often necessary to build front-end things by itself. Of course, the system interaction experience is just in the past, and the requirements are not as high as those of business systems. However, you will still be exposed to a lot of front-end knowledge, such as css, html and javascript, which are essential. You may not be proficient, but you must be able to use them. Recently, the front end has developed rapidly, and it has moved towards the engineering front end. It is often joked that the front end is the whole stack, and the front and back ends and all platforms are all-inclusive, which now seems to have become a reality.

Today, I would like to share with you how the front-end style tool sass is applied in Django.

What is sass

Sass or (Syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). - Wikipedia

The above is the explanation of wiki Encyclopedia. Simply put, sass is an advanced style precompiled language that is convenient for everyone to write css. It is only called "pre-compilation" because when using it, it needs to be compiled into css that can be recognized by browsers.

Official website: https://sass-lang.com/

After Sass 3, Scss syntax was introduced, which is fully compatible with Css 3 and inherits the powerful functions of Sass. As for Scss and Sass, we will not explain too much here. If you are interested, please refer to the official documents.

Then again, besides being easy to write, what are the advantages of Sass? You can read this classic article why sass? .

Let's talk about how to integrate in our common web framework Django.

Using sass in Django

Let's configure Sass step by step. The environment is as follows:

Python: 3.6 Django: 2.2

Create an Django project

1. Create a virtual development environment for Python: 


$ python3 -m venv env
$ source env/bin/active

2. Install django and create django project; 


$ pip install django
$ django-admin startproject sass_demo

3. Add related configurations 


# settings.py

TEMPLATES = [
  {
   ...
   'DIRS': [
     os.path.join(BASE_DIR, 'templates')
   ],
  } ... 
]

And create an index. html template, as follows: 


<html>
 <head>
  <title>Django sass demo</title>
 </head>
 <body>
  <div class="content">
   Django sass demo 
  </div>
 </body>
</html>

Run python manaage. py runserver to check that the Django project is configured.

Installing Django sass

Here, we use two third-party applications of Django, django-compressor and django-sass-processor, to compress and compile css respectively.

1. Install django sass application library 


$ pip install libsass django-compressor django-sass-processor

2. Add the following configuration to settings 


INSTALLED_APPS = [
   … 
  'sass_processor',
   … 
]

STATICFILES_FINDERS = [
 'django.contrib.staticfiles.finders.FileSystemFinder',
 'django.contrib.staticfiles.finders.AppDirectoriesFinder',
 'sass_processor.finders.CssFinder',
]

# Django Sass  After compiling css  Storage location of 
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR,'static','css')

3. Add sass file

Create an sass file. 


$ mkdir static && touch static/css/demo.scss

Add the following configuration to index. html: 


{% load sass_tags %}
<html>
 <head>
  <title>Django sass demo</title>
  <link href="{% sass_src 'css/demo.scss' %}" rel="external nofollow" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div class="content">
   Django sass demo 
  </div>
 </body>
</html>

demo. scss Add the style code for sass: 


body {
 .content{
  width: 100%;
  padding: 20px;
  text-align: center;
  background: grey;
  p {
   padding: 20px;
   background: pink;
  }
 }
}

In the browser, refresh again to see the style take effect. Open the developer tool and look at the html code, and you will find that the sass code has been replaced with css, as follows: 


<link href="/static/css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css">

At this point, the integration of the whole Sass is completed.

Summarize

django-compressor and django-sass-processor have completed the compilation and compression of css very well. The above is only a simple and quick description of the next configuration process, and you can refer to their usage documents for more functions. In addition, their compression function is controlled according to Debug, which will only be compressed in production environment, that is, Debug is false. In the test environment, you can try by adding the following parameters: 


$ pip install django
$ django-admin startproject sass_demo
0

The full version of the above code is available here: https://github.com/pylixm/django-sass-demo

Related articles: