Импортирование sass в тему underscores

Содержание

Вопрос или проблема
Ответ или решение
Импорт SASS в тему Underscores
Структура директорий
Работа с файлами SASS
Заключение
Ресурсы

Вопрос или проблема

Я разрабатываю новую тему, используя Underscores. Я начинаю процесс переноса кода с уже созданного сайта на html/css. Я создал его, используя файлы .scss, и не уверен, куда скопировать свои основные стили. Я вижу, что в underscores уже есть директория Sass, но нужно ли мне тогда все равно подключать файл .scss.

Извините, я, очевидно, немного запутался, как работать с sass и wordpress… любая помощь будет оценена.

Спасибо

Underscores в первую очередь создан для того, чтобы вы помещали свои стили в style.css. Этот стиль компилируется из основного SASS файла в sass/style.scss. Кроме того, woocommerce.css компилируется из sass/woocommerce.scss.

Если вы хотите использовать SASS сами, вы можете либо добавить свои стили в sass/style.scss, либо импортировать файл с вашими стилями в него. Вы можете видеть, что он уже импортирует некоторые другие файлы из директории sass/, как пример.

Однако вам не нужно подключать файл .scss. Браузеры не могут читать SASS, поэтому файл .scss должен быть скомпилирован в файл style.css. Однако Underscores не предоставляет никаких инструментов для этого, поэтому вам нужно будет добавить свои собственные инструменты сборки для компиляции SASS, чтобы sass/style.scss мог быть скомпилирован в style.css. Если ваш предыдущий HTML сайт был построен с использованием SASS, тогда любой процесс, который вы использовали для компиляции стилей, также будет работать здесь.

Ответ или решение

Импорт SASS в тему Underscores

При разработке темы для WordPress на базе Underscores, важно правильно организовать работу с SASS (Syntactically Awesome Style Sheets). Давайте подробно разберем шаги, которые помогут вам успешно интегрировать SASS в вашу тему.

Структура директорий

В Underscores существует директория sass, в которой находится файл style.scss. Этот файл служит основным местом для написания и организации ваших стилей. При этом, важно учитывать, что браузеры не могут обрабатывать файлы .scss, вам необходимо компилировать их в обычный CSS.

Работа с файлами SASS

Импорт ваших стилей: Вам нужно добавить ваш SASS-код в файл sass/style.scss. Если у вас есть отдельные .scss файлы с вашими стилями, вы можете импортировать их в style.scss с помощью команды @import. Например:
```
@import 'colors';
@import 'layouts';
```
Это позволит вам поддерживать порядок в коде и структурировать стили по разным файлам, что особенно удобно для больших проектов.
Не нужно подключать файл .scss: Вы не должны добавлять файл .scss в enqueue вашего проекта. Вместо этого, вы должны настроить сборку (build process), которая будет компилировать файлы .scss в style.css.
Настройка процесса сборки: Underscores не предоставляет встроенные инструменты для компиляции SASS. Вы можете использовать инструменты, такие как Gulp, Webpack или другие сборщики.

Пример настройки через Gulp:
- Установите необходимые пакеты:
```
npm install --save-dev gulp gulp-sass
```
- Создайте файл gulpfile.js с следующим содержанием:
```
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
 return gulp.src('sass/**/*.scss') // Входные .scss файлы
     .pipe(sass().on('error', sass.logError))
     .pipe(gulp.dest('./')); // Выходной .css файл
});

gulp.task('watch', function() {
 gulp.watch('sass/**/*.scss', gulp.series('sass'));
});

gulp.task('default', gulp.series('sass', 'watch'));
```
- Добавьте соответствующий скрипт в ваш package.json для запуска Gulp:
```
"scripts": {
 "build": "gulp"
}
```
После этого вы можете запустить сборку, и ваши файлы SASS будут компилироваться в style.css, который WordPress затем будет использовать.

Заключение

Таким образом, при работе с темой Underscores, вы должны:

Добавлять свои стили в sass/style.scss.
Настроить процесс компиляции, чтобы преобразовать SASS в CSS.
Не пытаться подключать .scss файл напрямую.

Эти шаги позволят вам использовать SASS с большим удобством и в полной мере извлечь из него все преимущества при создании вашей темы.

Ресурсы

Для подробного изучения тем, связанных с SASS и WordPress, вы можете обратиться к официальной документации на сайте SASS и документации WordPress. Это поможет вам более глубоко понять интеграцию инструментов и практик в разработке тем.