Where to keep SASS files in a Django project?

Question

I understand that static files (such as CSS, JS, images) in a Django project are ideally to be kept in a static/ directory, whether inside an app or the project root.

A sample folder structure may look like

project_root/my_app/static/my_app/css, js or img, or project_root/static/project_name/css, js or img

Also, I will run collectstatic command to make them ready to be served.

But my question is where should I keep my SASS files? If I create a sass directory inside static/my_app/ along with css, js and img directories, won't they become available to public when I make them ready to be served?

What could be the best location/directory to keep my SASS (or SCSS) files in a Django project so that they are not available to public as they will already be processed into CSS which is finally available to public? Also, please let me know if my concepts are not clear about static files.

Thank you

Answer 1

Keep assets in assets directory. Here is simple project layout I use (many things are omitted):

[project root directory]
          ├── apps/
          |    ├── [app]/
          |    └── __init__.py
          |
          ├── assets/
          |     ├── styles/ (css/)
          |     ├── fonts/
          |     ├── images/ (img/)
          |     └── scripts/ (js/)
          |
          ├── bin/
          ├── fixtures/
          ├── media/
          ├── docs/
          ├── requirements/
          ├── [project name]/
          |        ├── __init__.py
          |        ├── settings/
          |        ├── urls.py
          |        └── wsgi.py
          |
          ├── templates/
          |     ├── [app templates]/
          |     ├── base.html
          |     └── main.html
          |
          ├── manage.py
          ├── .gitignore
          ├── .gitmodules
          └── README

Sass files are compiled to CSS so they need to kept apart. Good practice is to have all assets (styles/fonts/images/scripts) in one subdirectory and then compile/copy them (+ minify/ugly/process whoever you want along the way) to static directory with some kind of task-runner (for example Gulp). Same goes for scripts; you can keep Coffee or Typescript files in assets/scripts and then compile them to Javascript files in static. This way only final files are available to user and are nicely separated from what you (developer) work on.