Препроцессоры: Sass, Less, Stylus

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

Интеграция препроцессоров в Vue.js

Vue CLI автоматически поддерживает большинство популярных препроцессоров. При создании проекта через vue create можно выбрать нужный препроцессор или добавить его позже с помощью соответствующих пакетов:

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

После установки препроцессора можно использовать его в <style> блоке компонентов, указав атрибут lang:

<style lang="scss">
$primary-color: #42b983;

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

Sass / SCSS

Особенности:

  • Поддержка переменных, вложенности, миксинов, функций.

  • Два синтаксиса:

    • SCSS — синтаксис, совместимый с CSS (использует фигурные скобки и точки с запятой).
    • Sass — сокращённый синтаксис без фигурных скобок и точек с запятой.

Пример переменных и вложенности:

$font-stack: Helvetica, sans-serif;
$primary-color: #42b983;

.container {
  font-family: $font-stack;
  color: $primary-color;

  .header {
    font-size: 2rem;
  }
}

Миксины и функции:

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

.button {
  @include flex-center;
  padding: 10px 20px;
  background-color: $primary-color;
}

В Vue.js SCSS особенно удобен для создания модульных стилей компонентов, когда каждая часть интерфейса имеет собственные переменные и миксины, не влияя на глобальные стили.

Less

Особенности:

  • Переменные обозначаются через @, например @primary-color.
  • Поддерживает вложенность, миксины и функции.
  • Прост в использовании для тех, кто привык к CSS-подобному синтаксису.

Пример использования переменных и вложенности:

@primary-color: #42b983;
@font-stack: 'Helvetica', sans-serif;

.container {
  font-family: @font-stack;
  color: @primary-color;

  .header {
    font-size: 2rem;
  }
}

Миксины в Less:

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

.button {
  .flex-center();
  padding: 10px 20px;
  background-color: @primary-color;
}

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

Stylus

Особенности:

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

Пример базового синтаксиса:

primary-color = #42b983
font-stack = 'Helvetica', sans-serif

.container
  font-family font-stack
  color primary-color

  .header
    font-size 2rem

Миксины и функции:

flex-center()
  display flex
  justify-content center
  align-items center

.button
  flex-center()
  padding 10px 20px
  background-color primary-color

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

Scoped стили и препроцессоры

Vue.js поддерживает атрибут scoped для <style> блока, что позволяет изолировать стили компонента. Препроцессоры отлично сочетаются с этим подходом:

<style lang="scss" scoped>
$primary-color: #42b983;

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

При использовании scoped Vue автоматически добавляет уникальные атрибуты к элементам компонента, предотвращая конфликт стилей с другими компонентами.

Выбор препроцессора

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

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

Оглавление