Pular para o conteúdo
Numio

Converter SCSS em CSS — Numio

Compila SCSS (.scss, sintaxe com chaves) para CSS puro com Dart Sass e depois adiciona prefixos de fornecedor com o Autoprefixer. Variáveis, @mixin/@include, aninhamento e módulos nativos como sass:math são resolvidos em regras CSS planas.

Obter o CSS compilado de um trecho .scss (por exemplo, um componente no estilo Bootstrap) para colar em um projeto sem etapa de build de Sass.

Scss

CSS

Quando usar

  • Obter o CSS compilado de um trecho .scss (por exemplo, um componente no estilo Bootstrap) para colar em um projeto sem etapa de build de Sass.
  • Depurar como aninhamento, seletores com & e funções de cor como darken() se expandem antes de commitar mudanças no SCSS.

Como usar

  1. Cole SCSS no editor Scss ou solte um arquivo .scss nele.
  2. Abra Configurações para escolher os alvos do Autoprefixer: defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. Inicialmente só "defaults" está ativado.
  3. Copie o resultado do painel CSS; é CSS puro que você pode salvar diretamente como arquivo .css.

Entrada SCSS

$primary: #3b82f6;

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

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

Detalhes e limitações

A compilação acontece no servidor: a página envia seu código para /api/sass-to-css, que chama o compileString do Dart Sass com a sintaxe scss. Depois, o Autoprefixer e a formatação com Prettier rodam em um Web Worker no seu navegador.

Cada entrada é compilada como um único arquivo independente. @use ou @import dos seus próprios partials falha com "Can't find stylesheet to import"; módulos nativos como @use "sass:math" funcionam.

Se a entrada não produzir CSS (só variáveis, mixins ou funções), o resultado é um único comentário CSS dizendo que nenhum CSS foi gerado, em vez de um erro.

FAQ

Suporta @use "sass:math" e outros módulos nativos?

Sim. Módulos nativos como sass:math, sass:color e sass:map estão disponíveis porque o código é compilado pelo Dart Sass. Só falham os imports dos seus próprios arquivos, já que apenas o texto colado é enviado.

Meu SCSS é enviado a um servidor?

Sim. A página envia o código para o endpoint /api/sass-to-css para compilação. A adição de prefixos e a formatação acontecem depois no seu navegador. Evite colar código que você não tem permissão para compartilhar.

Posso usar com a sintaxe indentada .sass?

Não, esta página compila com a sintaxe SCSS, então código baseado em indentação não é parseado. Use a página Sass para CSS, que envia a flag de sintaxe indentada para a mesma API.

Como obtenho prefixos de fornecedor para navegadores antigos?

Abra Configurações e ative alvos como "last 2 versions" ou "not ie < 11". As consultas selecionadas são passadas ao Autoprefixer como sua lista de navegadores.

Especificações e referências