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

Element Plus совместим с современными препроцессорами CSS, такими как Sass/SCSS, Less и Stylus. Использование препроцессоров позволяет создавать более структурированные стили, использовать переменные, миксины, функции и вложенность селекторов, что значительно облегчает поддержку крупных проектов.

Для интеграции препроцессора в проект на Vue 3 с Element Plus достаточно установить соответствующий пакет через npm или yarn:

npm install -D sass
npm install -D less
npm install -D stylus

После этого в компонентах Vue можно использовать блок <style lang="scss">, <style lang="less"> или <style lang="stylus">.

<template>
  <el-button type="primary">Кнопка SCSS</el-button>
</template>

<script setup>
import { ElButton } from 'element-plus'
</script>

<style lang="scss">
$primary-color: #409eff;

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

Использование переменных Element Plus в SCSS

Element Plus предоставляет встроенные SCSS-переменные для настройки темы компонентов. Эти переменные можно переопределять в проекте, чтобы создать уникальный дизайн. Например:

// variables.scss
$--color-primary: #ff5722;
$--font-size-base: 16px;

Затем импортируем этот файл в основной SCSS проекта или непосредственно в компонент:

@import './variables.scss';

.el-button {
  border-radius: 8px;
}

Ключевой момент: переменные должны быть определены до импорта стилей Element Plus, иначе переопределение не сработает.

Миксины и функции для стилизации

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

@mixin rounded-button($radius: 12px) {
  border-radius: $radius;
  padding: 8px 16px;
  font-weight: 600;
}

.el-button {
  @include rounded-button(20px);
}

Функции, такие как lighten() или darken(), упрощают работу с цветами:

.el-button--primary {
  background-color: $--color-primary;
  &:hover {
    background-color: darken($--color-primary, 8%);
  }
}

Вложенность селекторов

Вложенность — одно из главных преимуществ SCSS/LESS. Она позволяет логически группировать стили, облегчая чтение кода:

.el-form {
  .el-form-item {
    margin-bottom: 20px;

    .el-input {
      width: 100%;
      &::placeholder {
        color: #999;
      }
    }
  }
}

Темизация с помощью препроцессоров

Element Plus поддерживает глобальную тему через SCSS-переменные и можно создать несколько тем, переключаемых динамически. Например, можно определить светлую и темную тему:

// light-theme.scss
$--color-primary: #409eff;
$--color-success: #67c23a;

// dark-theme.scss
$--color-primary: #1f2d3d;
$--color-success: #3a8b5e;

В JavaScript можно динамически подгружать тему:

import 'element-plus/dist/index.css';
import './themes/light-theme.scss';

function switchTheme(theme) {
  if (theme === 'dark') {
    import('./themes/dark-theme.scss');
  } else {
    import('./themes/light-theme.scss');
  }
}

Совмещение с CSS-модулями

Препроцессоры отлично работают с CSS-модулями в Vue 3. Можно подключить SCSS с локальными классами:

<style lang="scss" module>
.button {
  background-color: $--color-primary;
  &:hover {
    background-color: darken($--color-primary, 10%);
  }
}
</style>

<template>
  <button :class="$style.button">Локальная кнопка</button>
</template>

Интеграция с PostCSS и автопрефиксером

Для обеспечения кроссбраузерной совместимости можно использовать PostCSS вместе с препроцессором. В vite.config.js или vue.config.js подключаем автопрефиксер:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "./src/styles/variables.scss";`
    }
  },
  postcss: {
    plugins: [require('autoprefixer')]
  }
}

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

Практические рекомендации

  • Всегда хранить глобальные переменные и миксины в отдельной папке styles для централизованного управления.
  • Использовать вложенность только до 3 уровней, чтобы код оставался читаемым.
  • Для больших проектов лучше подключать тему через отдельный SCSS-файл и динамически импортировать её при переключении тем.
  • Совмещать SCSS с CSS-модулями для локальных компонентов, чтобы избежать конфликтов имён.

Эта структура позволяет максимально использовать возможности препроцессоров при разработке на Element Plus, ускоряет стилизацию компонентов и обеспечивает легкое масштабирование проекта.

Оглавление