django
September 12, 2023

Django - SCSS

Конечно, можно использовать SCSS в Django. Для этого можно использовать сборщики стилей, такие как Sass или Less. Например, чтобы использовать Sass в Django, можно использовать расширение django-sass-processor.

Установите django-sass-processor через pip:

pip install django-sass-processor

для хостинга beget.ru

python3.6 -m pip install django-sass-processor --user --ignore-installed

Затем добавьте его в INSTALLED_APPS в `settings.py`:

```python
INSTALLED_APPS = [
    # ...
    'sass_processor',
]
```

Создайте директорию static и вложенную директорию scss, где будут располагаться ваши файлы SCSS. Внутри папки scss создайте файл main.scss:

```
<project_name>/
static/
scss/
main.scss
```

В `settings.py` добавьте путь к папке SCSS в SASS_PROCESSOR_INCLUDE_DIRS:

```python
SASS_PROCESSOR_INCLUDE_DIRS = [
    os.path.join(BASE_DIR, 'static', 'scss'),
]
```

Теперь вы можете создать файл стилей в формате SCSS и использовать его в шаблонах Django. Чтобы использовать SCSS в HTML-шаблонах, вы можете использовать тег `{% sass_src 'main.scss' %}`.

```html
{% load sass_tags %}
<!DOCTYPE html>
<html>
<head>
  <title>My awesome page</title>
  {% sass_src 'main.scss' %}
</head>
<body>
  <h1>Welcome to my page!</h1>
  <p>Here's some content...</p>
</body>
</html>
```

После этого, компилированные файлы будут храниться в папке static. Вы можете изменить директорию для скомпилированных файлов, установив SASS_PROCESSOR_OUTPUT_DIR в `settings.py`.

```python
SASS_PROCESSOR_OUTPUT_DIR = 'static/css/'
```

Теперь компилированный css будет сохраняться в папку static/css/.

Важно понимать, что SCSS-файлы будут компилироваться каждый раз, когда страница будет перезагружена. Также необходимо отслеживать зависимости между SCSS-файлами, чтобы изменения в одном файле были отражены в других.

Да, для этого в `settings.py` нужно задать `SASS_PROCESSOR_ENABLED = True` и `SASS_PROCESSOR_ROOT = STATIC_ROOT`, а также указать путь для скомпилированных CSS-файлов `SASS_PROCESSOR_OUTPUT_DIR = 'css'`.

Например:

```python
SASS_PROCESSOR_ENABLED = True
SASS_PROCESSOR_ROOT = STATIC_ROOT
SASS_PROCESSOR_OUTPUT_DIR = 'css'
```

После этого вам нужно скомпилировать стили, используя команду `python manage.py compilescss`. Эта команда создаст скомпилированные файлы CSS в папке `STATIC_ROOT/css`, а также создаст файл `.sass-cache`, который используется для того, чтобы Sass не компилировал файлы еще раз, если изменения не были внесены.

Для автоматической перекомпиляции SCSS-файлов при их изменении можно использовать следующую команду: `python manage.py runserver_plus --cert-file cert.crt --key-file cert.key`. Она запускает сервер в режиме `LiveReload`, который автоматически перезагружает страницу, когда происходят изменения в SCSS-файлах.

Кроме того, вы можете использовать инструменты, такие как Grunt или Gulp, чтобы автоматизировать процесс компиляции SCSS-файлов в CSS и запускать этот процесс в фоновом режиме.