Препроцессоры CSS и интеграция

Riot.js — это легковесный фреймворк для создания компонентного интерфейса на JavaScript, который обеспечивает реактивность и модульность кода. Одной из ключевых возможностей при работе с Riot-компонентами является интеграция стилей, в том числе через препроцессоры CSS, такие как Sass, Less или Stylus. Это позволяет организовать стили более структурированно и поддерживать масштабируемость проекта.

Подключение препроцессоров к компонентам

Riot-компоненты обычно создаются с расширением .riot и содержат три секции: <script>, <style> и HTML-разметку. Для использования препроцессоров CSS необходимо указать язык стилей в теге <style>:

<my-component>
  <style lang="scss">
    $primary-color: #3498db;

    .button {
      background-color: $primary-color;
      border: none;
      padding: 10px 20px;
      color: #fff;
      cursor: pointer;

      &:hover {
        background-color: darken($primary-color, 10%);
      }
    }
  </style>

  <button class="button">Кнопка</button>
</my-component>

Ключевой момент: атрибут lang="scss" сообщает сборщику, что стили нужно обрабатывать через Sass. Riot-компоненты компилируются с помощью сборщиков типа Vite, Webpack или Rollup, где настраивается соответствующий лоадер для выбранного препроцессора.

Настройка сборки под препроцессоры

Webpack: Для обработки .riot файлов с Sass потребуется подключить sass-loader и riot-tag-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.riot$/,
        use: [
          'babel-loader',
          {
            loader: 'riot-tag-loader',
            options: { hot: true, type: 'es6' }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

Vite: В конфигурации достаточно указать обработку scss через плагин @vitejs/plugin-vue или встроенные настройки CSS:

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$global-color: #2ecc71;`
      }
    }
  }
};

Сборщики автоматически компилируют Sass/SCSS в стандартный CSS, интегрированный в компонент Riot.

Scoped стили и переопределение

Riot.js поддерживает scoped стили, которые применяются только к конкретному компоненту. При использовании препроцессоров это работает так же, как с обычными CSS. Пример с SCSS:

.card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  .title {
    font-size: 18px;
    color: darken(#3498db, 20%);
  }
}

Эти стили автоматически будут изолированы от других компонентов, что предотвращает конфликты и упрощает поддержку крупных проектов.

Переменные, миксины и функции

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

  • Переменные: позволяют задавать цвета, размеры и шрифты в одном месте.
  • Миксины: позволяют создавать наборы стилей, которые можно применять к разным элементам.
  • Функции: упрощают вычисление оттенков, размеров и адаптивных значений.

Пример миксина в SCSS:

@mixin button-style($bg-color) {
  background-color: $bg-color;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

.button-primary {
  @include button-style(#3498db);
}

.button-success {
  @include button-style(#2ecc71);
}

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

Интеграция с темизацией и глобальными стилями

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

// variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// my-component.riot
<style lang="scss">
  @import 'variables';

  .header {
    color: $primary-color;
  }
</style>

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

Преимущества использования препроцессоров в Riot.js

  • Модульность стилей: каждый компонент содержит свои стили, легко управлять локальными изменениями.
  • Повторное использование кода: через переменные и миксины.
  • Поддержка темизации: централизованное управление цветами и шрифтами.
  • Снижение конфликтов CSS: благодаря scoped стилям и автоматической изоляции.

Особенности работы с JavaScript и стилями

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

<alert-message>
  <style lang="scss">
    .alert {
      padding: 10px;
      border-radius: 4px;
      &.success { background-color: $success-color; }
      &.error { background-color: $error-color; }
    }
  </style>

  <div class="alert {type}">
    {message}
  </div>

  <script>
    export default {
      type: 'success',
      message: 'Операция выполнена успешно'
    }
  </script>
</alert-message>

Такое сочетание реактивных данных и препроцессорных стилей обеспечивает мощный инструмент для построения гибких и поддерживаемых интерфейсов.

Оглавление