VueCraft NPM

Интеграция с CSS ​

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

ts
import { toMediaQueries, toScssModule, toCustomMedia, toTailwindScreens } from 'responsive-media'

const config = {
  mobile: [{ type: 'max-width', value: 600 }],
  tablet: [{ type: 'max-width', value: 960 }],
  desktop: [{ type: 'min-width', value: 961 }],
}

Строки media query ​

toMediaQueries(config)

Record<string, string>

Сопоставляет каждому ключу его media query — ту же строку, которую getMediaQueries() возвращает для экземпляра.

ts
toMediaQueries(config)
// { mobile: '(max-width: 600px)', tablet: '(max-width: 960px)', desktop: '(min-width: 961px)' }

SCSS ​

toScssModule(config, options?)

string

Готовый SCSS-модуль: карта запросов и миксин для их использования.

scss
@use 'sass:map';

$queries: (
  'mobile': '(max-width: 600px)',
  'tablet': '(max-width: 960px)',
  'desktop': '(min-width: 961px)',
);

@mixin media($key) {
  @if not map.has-key($queries, $key) {
    @error 'Unknown breakpoint #{$key}';
  }
  @media #{map.get($queries, $key)} {
    @content;
  }
}
  • name — string · по умолчанию: 'queries'. Имя карты.
  • mixin — string · по умолчанию: 'media'. Имя миксина.

Ключи всегда берутся в кавычки, поэтому ключ вроде 2xl допустим. Неизвестный ключ останавливает компиляцию с ошибкой, а не даёт пустой @media.

toScssMap(config, options?) возвращает только карту — на случай, когда вы хотите написать свой миксин.

Запишите модуль в файл один раз, затем пользуйтесь им:

ts
import { writeFileSync } from 'node:fs'
writeFileSync('src/styles/_breakpoints.scss', toScssModule(config))
scss
@use 'breakpoints' as bp;

.sidebar {
  width: 280px;

  @include bp.media(mobile) {
    width: 100%;
  }
}

@custom-media ​

toCustomMedia(config, options?)

string

По одному правилу @custom-media на ключ — для использования с PostCSS-плагином вроде postcss-custom-media. Сами браузеры это правило не понимают.

ts
toCustomMedia(config)
// @custom-media --mobile (max-width: 600px);
// @custom-media --tablet (max-width: 960px);
// @custom-media --desktop (min-width: 961px);
  • prefix — string · по умолчанию: '--'. Ставится перед каждым ключом.

Tailwind ​

toTailwindScreens(config)

Record<string, { raw: string }>

screens конфигурации Tailwind 3, где каждый брейкпоинт — сырой media query:

ts
// tailwind.config.ts
import { toTailwindScreens } from 'responsive-media'
import { breakpoints } from './breakpoints'

export default {
  theme: { screens: toTailwindScreens(breakpoints) },
}

В Nuxt ​

Модуль пишет SCSS-модуль и файл @custom-media за вас — из тех же breakpoints, что использует для composables:

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['responsive-media/nuxt'],
  responsive: {
    breakpoints: {
      mobile: [{ type: 'max-width', value: 600 }],
      desktop: [{ type: 'min-width', value: 601 }],
    },
    css: { scss: true, customMedia: true },
  },
})
  • css.scss записывает .nuxt/responsive-media/queries.scss.
  • css.customMedia записывает .nuxt/responsive-media/custom-media.css.
vue
<style lang="scss">
@use '#build/responsive-media/queries' as r;

.page {
  color: black;

  @include r.media(mobile) {
    color: red;
  }
}
</style>