"Тачка на прокачку" уже давно не выходит. А вот "Django на прокачку" снова продолжает вас радовать. В сегодняшнем эпизоде мы: 1.       Узнаем, что такое препроцессоры и чем они интереснее обычного CSS; 2.       Разберёмся с SASS и SCSS, узнаем, чем они отличаются; 3.       И рассмотрим на практике, как использовать SASS/SCSS в Django-проекте. Как обычно, меньше болтовни – больше кода. Центрирует картинку Макс. Выходит за рамки Егор. Статью написали авторы канала PyLounge. Поехали! Постоянная рубрика «В паре слов про». Препроцессор CSS – это как бы «язык», который добавляет некоторых функций в CSS и при этом не парится о совместимости с браузером. Например, можно использовать переменные, простую программную логику, функции и т.д. Также препроцессоры помогают сделать CSS более кратким, адаптируемым, интуитивным, модным и молодежным. Существует множество CSS-препроцессоров, но больше всего на слуху SASS/SCSS и LESS. LESS – это надстройка над CSS, которая добавляет много динамических свойств. Вводит переменные, операции, function-like элементы и примеси, а также возможность писать таблицы стилей модульно. SASS – это скриптовый язык препроцессора, который интерпретируется или компилируется в каскадные таблицы стилей CSS. Является сокращенным вариантом CSS, однако предоставляет расширенные возможности: переменные, примеси, расширения и импорты.  У SASS есть два синтаксиса, первый это стандартный который был изначально и второй, который был создан под влиянием LESS, и называется SCSS. Что LESS, что SASS – это примочки чисто для программиста. Потом все равно их код компилируется в обычный CSS. Как по мне SASS, а точнее SCSS немного проще и синтаксис требует меньше кода. Поэтому будем подключать его. А вообще, изучить любой препроцессор не так уж сложно, если ты знаешь CSS. С понятийным аппаратом разобрались. Переходим к практике. Для начала, создадим пустой Django проект, который я назову django_sass. Для этого: 1.     Открываем командную строку; 2.     Командой mkdir создадим на диске папку django_sass; 3.     И перейдем в нее через cd; 4.     Теперь создадим виртуальное окружение python с помощью инструмента venv; 5.     И сразу же его активируем. Называться наше виртуальное окружение будет env; С помощью стандартного пакетного менеджера pip установим в виртуальное окружение нужные для проекта библиотеки. А именно: 1.     сам фреймворк Django, 2.     libsass – модуль-обертку для библиотеки LibSASS, которая на самом деле написана на С++; 3.     django-compressor – он обрабатывает и сжимает подключенные inline Javascript и CSS в шаблоне Django в кэшируемые статические файлы. Также работает LESS и SASS.  Вот пример из документации. В данном случае он нам не особо нужен, так как у нас минимально возможный проект для примера, в котором будет один sass-файл. Но в реальности css и js файлов много, а значит эта штука полезна. Поэтому не упомянуть я ее не мог. 4.     django-sass-processor – позволяет компилировать SASS/SCSS файлы и использовать их внутри джангового шаблонизатора, с помощью специальных тегов. Дальше я еще обращу ваше внимание на это. После того, как все установилось: 1.     Создаем Django-проект через django-admin; 2.     Переходим в свежесозданную папку; 3.     И создаем приложение внутри проекта. Надо подключить созданное приложение и установленные библиотеки к Django-проекту, поэтому: 1.     Открываем файл settings.py в корне проекта; 2.     И добавляем пару срок, а именно – в конец массива INSTALLED_APPS название нашего приложения test_sass и библиотеку sass_processor. Django-sass-processor поставляется со встроенным поисковиком статических файлов, чтобы находить скомпилированные CSS-файлы. Поэтому нам этот поисковик надо включить, вместе со статическими средствами поиска файлов Django по умолчанию. Чуточку ниже добавим вот такие строки: Когда мы обычно настраиваем статические файлы (например CSS, JS файлы) с помощью Django, нам нужно определить наш каталог STATIC_ROOT, в котором будут находиться статические ресурсы. Этот параметр также сообщает Django, где искать эти статические ресурсы. Поэтому нам по аналогии надо определить SASS_PROCESSOR_ROOT, чтобы Django знал, где лежат наши SASS’ы: Засунем их в тот же каталог, куда обычно добавляют обычные CSS и JS файлы, в папку static в корне проекта. Может было бы и лучше создать отдельный каталог для SASS и SCSS и установить SASS_PROCESSOR_ROOT в этот каталог. Но мне пофигу, я рокстар (извините). HTML-странички Django проекта принято размещать в папке templates, которую мы создадим чуть позже. Но в настройках укажем сразу. А конкретно укажем, что каталог templates в корне проекта будет использоваться в качестве хранилища шаблонов django. Понадобится нам переменная TEMPLATE_DIR и список TEMPLATES. Вот теперь создаём папку static в корне проекта. И заодно папку templates, там же в корне. В папку templates добавляем пока что пустой файл index.html. Мы хотим, чтобы наша страничка с подключенным SASS была доступна по адресу 127.0.0.1:8000/sass_page. Поэтому: 1.     Перейдем в файл приложения urls.py; 2.     И пропишем нашему приложению адрес-маршрут; 3.     Если пользователь перейдет по нему, то вызовется функция-обработчик sass_page_handler, которую создадим немного дальше. Теперь самое время создать эту функцию-обработчик. Для этого: 1.     Переходим в папку приложения test_sass; 2.     И открываем файл views.py; 3.     Здесь мы и создадим функцию sass_page_handler, которая будет просто отдавать браузеру нашу index.html страницу, на которой мы подключим SASS. Наконец: 1.     Отправляемся в созданную ранее папку static; 2.     В ней создадим папку css; 3.     А в этой папке и сам SASS-файл main.scss. 4.     Далее в этот файл запишем какой-нибудь простенький стиль. Например, текст внутри всех h1 тегов, которые лежат внутри тега body будет 20px, по центру и красный; Теперь же отправляемся в файл index.html. Добавим туда минимальную разметку и подключим main.sсss файл: 1.     Первоначально добавляем шаблонный тег load sass_tags, который дает возможность подключить SCSS-файлы к нашему шаблону страницы; 2.     Затем в link, также с помощью специального тега sass_src, доступного благодаря библиотеке django-sass-processor, указываем путь до main.sсss файла и подключаем его; 3.     Ну и немного простенькой html-разметки для вида. Возвращаемся в консоль и запускам наш django-проект командой python manager.py runserver. Теперь: 1.     Откроем браузер; 2.     И введем в адресную строку 127.0.0.1:8000/sass_page 3.     Все работает. Все, SCSS нормально функционирует на странице, а вы великолепны! Исходный код:https://github.com/pylounge/pylounge-django-sass Если кому-то проще в видеоформате:  Developer