Перейти к основному содержанию
iotools.cloudiotools.cloud

Конвертер пользовательских свойств CSS в переменные SCSS

Преобразуйте пользовательские свойства CSS (--name, var()) в переменные Sass/SCSS ($name) и наоборот. Разворачивает :root в глобальную область Sass, разрешает fallback var() и сохраняет комментарии и структуру.

Ввод

Вывод

Вывод
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-custom-properties-to-scss-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "direction": "css-to-scss",
    "inputCode": ":root {\n  --primary-color: #464aff;\n  --spacing-…"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-custom-properties-to-scss-converter` tool (CSS Custom Properties to SCSS Variables Converter) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-custom-properties-to-scss-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Конвертер пользовательских свойств CSS в переменные SCSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Что делает этот инструмент

Вставьте CSS, использующий пользовательские свойства (--primary-color: #464aff;, на которые ссылаются через var(--primary-color)), и получите эквивалентный Sass с объявлениями $primary-color: #464aff; и ссылками $primary-color — или запустите в обратном направлении, из SCSS на основе $variable обратно в простые пользовательские свойства CSS. Выберите направление, вставьте код, и преобразованный код появится мгновенно. Всё работает в вашем браузере; ничего из того, что вы вставляете, не загружается никуда.

CSS → SCSS

  • Обёртка :root { ... } разворачивается: её объявления переходят в глобальную область Sass, поскольку переменная Sass не может находиться внутри селектора так же, как пользовательское свойство CSS.
  • var(--name) становится $name, когда --name объявлен в этом блоке :root.
  • var(--name, fallback) разрешает fallback для вас, когда --name не имеет объявления, на которое можно ссылаться — включая fallback, который сам по себе является вложенным var().
  • Комментарии, селекторы и форматирование за пределами конвертируемых частей остаются ровно такими, как вы их написали.

SCSS → CSS

  • $name: value;, объявленный на верхнем уровне, переходит в сгенерированный блок :root { ... }, поскольку простое пользовательское свойство не может существовать вне селектора в CSS.
  • $name: value;, объявленный внутри селектора, конвертируется на месте в --name: value;, сохраняя его область видимости.
  • Каждая ссылка $name становится var(--name). Завершающий !default отбрасывается — его поведение "присвоить только если не установлено" не имеет статического эквивалента в CSS.

Что это не будет делать

Это конвертер синтаксиса переменных, а не компилятор Sass. Миксины, @if/@each, @function, интерполяция строк (#{...}) и математика Sass не оцениваются — значение вроде $base * 2 становится var(--base) * 2 как простой текст, который вам нужно будет обернуть в calc() вручную, чтобы получить действительный CSS. --name, объявленный внутри условного селектора (переопределение [data-theme="dark"], коррекция точки разрыва @media), оставляется как есть, а не конвертируется, поскольку переменная Sass времени компиляции не может представить значение, которое меняется для каждого media query или каскада.

FAQ

Будет ли это компилировать весь мой файл Sass в CSS? Нет — переводятся только объявления переменных и ссылки. Вложение, &, миксины и всё остальное проходит без изменений. Запустите результат через настоящий компилятор Sass (или Форматер SCSS / Sass для приведения вывода в порядок) для чего-либо, кроме переменных.

Что происходит со значениями fallback var() при преобразовании в SCSS? Если на указанное пользовательское свойство ссылается где-то ещё в вашем вводе, fallback отбрасывается — переменная Sass уже имеет реальное значение. Если оно нигде не объявлено, сам fallback используется вместо него, поэтому преобразованный код не ссылается на неопределённую переменную.

Обрабатывает ли он переменные CSS с областью видимости вне :root, такие как переопределения тёмного режима? Нет, по замыслу — --name, переобъявленный под media query или селектор [data-theme], является переопределением во время выполнения, которое не имеет эквивалента в переменных времени компиляции Sass, поэтому эти объявления остаются как простой CSS, а не молча создают неправильный снимок.

Конфиденциальность

Всё работает локально в вашем браузере. Ваш код никогда не загружается и не сохраняется нигде.

sasscss variablesdesign tokensvar()preprocessorthemingstylesheet variablesroot variables

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу