Использование препроцессоров

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

Наиболее распространённые инструменты — Sass (SCSS), Less и Stylus. В контексте fullPage.js чаще всего применяется SCSS благодаря его расширенным возможностям и популярности в современных сборщиках.

Структурирование стилей

При использовании fullPage.js интерфейс обычно состоит из:

  • контейнера #fullpage
  • набора .section
  • вложенных .slide (при необходимости)

Препроцессоры позволяют удобно организовать вложенность:

#fullpage {
  .section {
    height: 100vh;

    &.dark {
      background-color: #111;
      color: #fff;
    }

    &.light {
      background-color: #f5f5f5;
      color: #333;
    }

    .slide {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

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

Переменные для управления стилями

fullPage.js часто используется для лендингов и презентаций, где важно единообразие. Переменные позволяют централизованно управлять цветами, отступами и анимациями:

$primary-color: #3498db;
$transition-speed: 0.7s;

.section {
  transition: background-color $transition-speed ease;

  &.active {
    background-color: $primary-color;
  }
}

Изменение значения переменной автоматически обновляет стили во всех секциях.

Миксины для повторяющихся паттернов

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

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section {
  @include flex-center;
}

Пример с анимацией:

@mixin fade-in($duration: 0.5s) {
  opacity: 0;
  transition: opacity $duration ease;

  &.active {
    opacity: 1;
  }
}

.section {
  @include fade-in(0.8s);
}

Работа с состояниями fullPage.js

Библиотека автоматически добавляет классы, такие как:

  • .active
  • .fp-section
  • .fp-slide
  • .fp-completely

Препроцессоры позволяют удобно описывать состояния:

.section {
  opacity: 0.5;

  &.active {
    opacity: 1;
  }

  &.fp-completely {
    transform: scale(1);
  }
}

Генерация повторяющихся элементов

Если проект содержит большое количество секций, можно использовать циклы:

@for $i from 1 through 10 {
  .section-#{$i} {
    background-color: lighten(#3498db, $i * 5%);
  }
}

Это особенно полезно для:

  • демонстрационных страниц
  • слайдеров с повторяющейся логикой
  • прототипов

Управление адаптивностью

fullPage.js поддерживает адаптивность через опции (responsiveWidth, responsiveHeight), но стили также требуют настройки.

Препроцессоры упрощают работу с медиа-запросами:

@mixin mobile {
  @media (max-width: 768px) {
    @content;
  }
}

.section {
  font-size: 18px;

  @include mobile {
    font-size: 14px;
  }
}

Можно централизовать брейкпоинты:

$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px
);

@mixin respond($size) {
  @media (max-width: map-get($breakpoints, $size)) {
    @content;
  }
}

Управление анимациями секций

fullPage.js активно используется с анимациями при смене секций. Препроцессоры помогают стандартизировать эффекты:

@mixin slide-up {
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.6s ease;

  &.active {
    transform: translateY(0);
    opacity: 1;
  }
}

.section {
  @include slide-up;
}

Организация файлов

При работе с препроцессорами рекомендуется разбивать стили на модули:

styles/
│
├── base/
│   ├── _variables.scss
│   ├── _mixins.scss
│
├── layout/
│   ├── _fullpage.scss
│
├── sections/
│   ├── _section1.scss
│   ├── _section2.scss
│
└── main.scss

В main.scss:

@import 'base/variables';
@import 'base/mixins';
@import 'layout/fullpage';
@import 'sections/section1';
@import 'sections/section2';

Переопределение стилей fullPage.js

Библиотека подключает собственные стили, которые часто требуется переопределять. Препроцессоры помогают делать это аккуратно:

#fp-nav {
  ul li a span {
    background: $primary-color;
  }
}

Или с вложенностью:

#fp-nav {
  ul {
    li {
      a {
        span {
          background: $primary-color;
        }
      }
    }
  }
}

Работа с темами

Препроцессоры позволяют легко создавать темы:

$themes: (
  dark: (#111, #fff),
  light: (#fff, #000)
);

@each $name, $colors in $themes {
  .theme-#{$name} {
    background-color: nth($colors, 1);
    color: nth($colors, 2);
  }
}

Применение:

<div class="section theme-dark"></div>

Интеграция с JavaScript

fullPage.js предоставляет callbacks (afterLoad, onLeave), которые можно использовать вместе с классами, описанными в SCSS:

new fullpage('#fullpage', {
  afterLoad: function(origin, destination) {
    destination.item.classList.add('loaded');
  }
});

SCSS:

.section {
  opacity: 0;

  &.loaded {
    opacity: 1;
    transition: opacity 0.8s ease;
  }
}

Оптимизация и поддержка

Использование препроцессоров даёт преимущества:

  • уменьшение объёма кода
  • улучшение читаемости
  • централизованное управление стилями
  • лёгкая масштабируемость проекта

Особенно это важно для fullPage.js-проектов, где каждая секция может представлять отдельный экран с уникальным дизайном и поведением.

Использование функций

SCSS-функции помогают вычислять значения:

@function section-height($vh) {
  @return $vh * 1vh;
}

.section {
  height: section-height(100);
}

Совмещение с современными инструментами

Препроцессоры легко интегрируются с:

  • Webpack
  • Vite
  • Gulp

Пример для Vite:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "src/styles/variables.scss";`
    }
  }
}

Контроль z-index и слоёв

fullPage.js активно использует позиционирование. Препроцессоры позволяют управлять слоями через переменные:

$z-navigation: 100;
$z-content: 10;

#fp-nav {
  z-index: $z-navigation;
}

.section {
  z-index: $z-content;
}

Работа с градиентами и сложными стилями

@mixin gradient($from, $to) {
  background: linear-gradient(to bottom, $from, $to);
}

.section {
  @include gradient(#3498db, #8e44ad);
}

Масштабирование проекта

При увеличении количества секций и слайдов:

  • без препроцессора возникает хаос
  • с препроцессором сохраняется структура и читаемость

Каждая новая секция добавляется как отдельный модуль, а общие стили остаются централизованными.

Работа с кастомными эффектами прокрутки

fullPage.js можно расширять кастомными стилями:

.section {
  transform: scale(0.9);
  transition: transform 0.7s ease;

  &.active {
    transform: scale(1);
  }
}

Итоговая структура подхода

Использование препроцессоров при работе с fullPage.js включает:

  • вложенную структуру стилей
  • переменные для дизайна
  • миксины для повторяемых решений
  • генерацию классов
  • модульную архитектуру
  • адаптивные решения
  • удобное управление состояниями

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

Оглавление