Как создать адаптивный WordPress скин с помощью SASS

Автор: Владимир Фомин | Опубликовано: 01.12.2025

Создание адаптивного скина для WordPress — важная задача в разработке, так как современные сайты должны отлично смотреться на любых устройствах. Использование CSS-препроцессоров, таких как SASS, значительно облегчает работу со стилями, повышая удобство поддержки и масштабируемость кода. В этой статье разберём, как можно создать адаптивный WordPress скин с помощью SASS, приведём примеры и расскажем, как интегрировать это в тему.

Почему SASS — лучший выбор для стилизации WordPress тем

SASS (Syntactically Awesome Stylesheets) — расширение CSS, которое добавляет переменные, вложенность, миксины и функции. Это делает код более организованным и переиспользуемым. Для крупных проектов и тем WordPress использование SASS позволяет:

Сократить дублирование кода;
Легко управлять цветовой схемой и шрифтами через переменные;
Использовать вложенность для логической структуры стилей;
Создавать миксины для повторяющихся блоков;
Поддерживать адаптивность через миксины и вложенные медиа-запросы.

В результате, стили становятся чистыми и легко поддерживаемыми, что особенно важно для скинов, которые часто обновляются или кастомизируются.

Настройка рабочего окружения для разработки скина на SASS

Для начала нужно настроить компиляцию SASS в CSS. Есть несколько вариантов: использовать gulp, webpack или просто плагин для редактора. Рассмотрим самый простой вариант с использованием Node.js и npm.

1. Установите Node.js и npm, если они не установлены.

2. В корне темы создайте файл package.json командой:

npm init -y

3. Установите пакет sass:

npm install sass --save-dev

4. В package.json добавьте скрипт для компиляции:

"scripts": {"wpskins-sass": "sass --watch sass:css --style=compressed"}

5. Создайте папки sass и css в теме. Пишите стили в sass/style.scss, компилируйте в css/style.css.

6. Подключите css/style.css в functions.php темы.

Создание структуры SASS для адаптивного скина

Правильная структура — залог удобства поддержки. Рекомендуется разбить стили на несколько файлов и подключать их из style.scss.

Пример структуры:

_variables.scss — переменные цветов, шрифтов и размеров;
_mixins.scss — миксины для медиа-запросов, теней, анимаций;
_base.scss — базовые стили (сброс, типографика);
_layout.scss — стили для сетки, контейнеров;
_components.scss — кнопки, формы, меню;
_responsive.scss — медиа-запросы и адаптивные стили.

В style.scss всё импортируется:

@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';
@import 'responsive';

Использование переменных и миксинов для адаптивности

В _variables.scss задаём цвета и брейкпоинты:

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-family: 'Open Sans', sans-serif;

$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;

В _mixins.scss создаём миксины для медиа-запросов:

@mixin wpskins-media-mobile {
  @media (max-width: $breakpoint-mobile) {
    @content;
  }
}

@mixin wpskins-media-tablet {
  @media (max-width: $breakpoint-tablet) {
    @content;
  }
}

@mixin wpskins-media-desktop {
  @media (min-width: $breakpoint-desktop) {
    @content;
  }
}

Теперь можно удобно писать адаптивные стили. Например, в _components.scss:

.button {
  background-color: $primary-color;
  font-family: $font-family;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;

  @include wpskins-media-mobile {
    padding: 10px 20px;
    font-size: 14px;
  }

  &:hover {
    background-color: $secondary-color;
  }
}

Подключение скомпилированного CSS в тему WordPress

Чтобы WordPress корректно подключал стили, добавьте в functions.php следующий код:

function wpskins_enqueue_styles() {
  wp_enqueue_style('wpskins-style', get_template_directory_uri() . '/css/style.css', array(), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_styles');

Это обеспечит загрузку оптимизированного CSS и позволит обновлять стили без лишних усилий.

Пример: адаптивный header с логотипом и меню

В _layout.scss можно создать адаптивный header с использованием flexbox и миксинов:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: $primary-color;

  @include wpskins-media-mobile {
    flex-direction: column;
    padding: 15px 20px;
  }

  .logo {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
  }

  nav.menu {
    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;

      @include wpskins-media-mobile {
        flex-direction: column;
        width: 100%;
      }

      li {
        margin-left: 20px;

        @include wpskins-media-mobile {
          margin: 10px 0;
        }

        a {
          color: #fff;
          text-decoration: none;
          font-weight: 600;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

Полезные плагины для работы с SASS в WordPress разработке

Хотя SASS компилируется вне WordPress, есть полезные плагины и инструменты, облегчающие работу:

WP-SCSS — позволяет компилировать SASS прямо в WordPress, автоматически обновляя CSS при изменениях файлов;
Simple Custom CSS and JS — позволяет добавлять пользовательские CSS/JS, удобно для тестов;
Code Snippets — для добавления PHP-кода, например, для подключения стилей;
Theme Check — проверяет тему на ошибки и соответствие стандартам.

Использование этих инструментов ускорит разработку и сделает процесс более удобным.

Заключение: почему адаптивность и SASS важны для скинов WordPress

Адаптивность напрямую влияет на удобство пользователей и SEO, а SASS помогает создавать качественные, поддерживаемые темы. Инвестируя время в правильную структуру и инструменты, вы получите скин, который будет легко обновлять и расширять под нужды клиентов или проекта.