Conversor de Propriedades Personalizadas CSS para Variáveis SCSS
Converta propriedades personalizadas CSS (--name, var()) para variáveis Sass/SCSS ($name) e vice-versa. Desembrulha :root no escopo global do Sass, resolve fallbacks var(), e preserva comentários e estrutura.
Entrada
Saída
Mais formas de usar esta ferramenta
API REST
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-…"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-custom-properties-to-scss-converter` tool (CSS Custom Properties to SCSS Variables Converter) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-custom-properties-to-scss-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Conversor de Propriedades Personalizadas CSS para Variáveis 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>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que esta ferramenta faz
Cole CSS que usa propriedades personalizadas (--primary-color: #464aff;, referenciadas via var(--primary-color)) e obtenha de volta o Sass equivalente, com declarações $primary-color: #464aff; e referências $primary-color — ou execute ao contrário, de SCSS baseado em $variable voltando para propriedades personalizadas CSS simples. Escolha uma direção, cole e o código convertido aparece instantaneamente. Tudo é executado em seu navegador; nada que você cola é carregado em lugar nenhum.
CSS → SCSS
- Um invólucro
:root { ... }é desembrulhado: suas declarações fluem para o escopo global do Sass, pois uma variável Sass não pode existir dentro de um seletor da maneira que uma propriedade personalizável CSS pode. var(--name)torna-se$namequando--nameé declarado naquele bloco:root.var(--name, fallback)resolve o fallback para você quando--namenão tem uma declaração para apontar — incluindo um fallback que é ele próprio umvar()aninhado.- Comentários, seletores e formatação fora das partes sendo convertidas são deixados exatamente como você os escreveu.
SCSS → CSS
- Um
$name: value;declarado no nível superior se move para um bloco:root { ... }gerado, pois uma propriedade personalizada simples não pode existir fora de um seletor em CSS. - Um
$name: value;declarado dentro de um seletor converte no local para--name: value;, mantendo seu escopo. - Cada referência
$nametorna-sevar(--name). Um!defaultà direita é descartado — seu comportamento "atribuir apenas se não definido" não tem equivalente CSS estático.
O que não fará
Esta é uma conversor de sintaxe de variável, não um compilador Sass. Mixins, @if/@each, @function, interpolação de string (#{...}) e matemática Sass não são avaliados — um valor como $base * 2 torna-se var(--base) * 2 como texto simples, que você teria que envolver em calc() manualmente para obter CSS válido. Um --name declarado dentro de um seletor condicional (uma substituição de [data-theme="dark"], um ajuste de ponto de interrupção @media) é deixado como está em vez de ser convertido, pois uma variável Sass em tempo de compilação não pode representar um valor que muda por media query ou cascata.
FAQ
Isso compilará meu arquivo Sass inteiro para CSS?
Não — apenas declarações de variáveis e referências são traduzidas. Aninhamento, &, mixins e tudo mais passa intocado. Execute o resultado através de um compilador Sass real (ou o Formatador SCSS / Sass para organizar a saída) para qualquer coisa além de variáveis.
O que acontece com valores de fallback var() no caminho para SCSS?
Se a propriedade personalizada referenciada for declarada em outro lugar em sua entrada, o fallback será descartado — a variável Sass já tem um valor real. Se não for declarada em lugar nenhum, o fallback em si é usado em seu lugar, para que o código convertido não referencie uma variável indefinida.
Ele manipula variáveis CSS com escopo fora de :root, como substituições de modo escuro?
Não, por design — um --name redeclarado sob uma media query ou um seletor [data-theme] é uma substituição em tempo de execução que não tem equivalente nas variáveis em tempo de compilação do Sass, portanto essas declarações são deixadas como CSS simples em vez de silenciosamente produzir um snapshot errado.
Privacidade
Tudo é executado localmente em seu navegador. Seu código nunca é carregado ou armazenado em lugar nenhum.