Pular para o conteúdo
Numio

Converter Sass em CSS — Numio

Compila a sintaxe indentada do Sass (.sass, sem chaves nem ponto e vírgula) para CSS puro com Dart Sass e depois executa o Autoprefixer para os navegadores-alvo que você escolher. Variáveis, mixins (=name / +name) e aninhamento são resolvidos em regras CSS planas.

Conferir para que compila um arquivo .sass de sintaxe indentada de um projeto Rails antigo ou no estilo Bulma, sem montar um toolchain de Sass.

Sass

CSS

Quando usar

  • Conferir para que compila um arquivo .sass de sintaxe indentada de um projeto Rails antigo ou no estilo Bulma, sem montar um toolchain de Sass.
  • Gerar CSS puro a partir de um trecho .sass para colar em um CMS, template de e-mail ou codepen que não aceita Sass.

Como usar

  1. Cole Sass no editor Sass ou solte um arquivo .sass 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 Sass

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #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 indentada. 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.

Os prefixos de fornecedor dependem dos alvos selecionados. No exemplo, user-select recebe os prefixos -webkit- e -moz- com a consulta "defaults".

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

Qual é a diferença entre Sass e SCSS aqui?

Esta página espera a sintaxe indentada: aninhamento por indentação, sem chaves nem ponto e vírgula, e os atalhos =mixin e +include. Para código com chaves, use a página SCSS para CSS; as duas chamam a mesma API com uma flag de sintaxe diferente.

Posso importar partials como _variables.sass?

Não. O servidor compila só o texto que você cola, sem sistema de arquivos nem load paths, então imports dos seus próprios arquivos falham. Em vez disso, cole o conteúdo do partial acima do código que o usa.

O que acontece se meu arquivo só tiver variáveis ou mixins?

O Sass não emite CSS para declarações que nunca são usadas, então a página mostra o comentário /* No CSS generated: ... */. Adicione uma regra que use as variáveis ou inclua o mixin para obter saída.

A saída é minificada?

Não. O CSS é expandido e formatado com Prettier. Seletores aninhados como &:hover são escritos como regras separadas, como .button:hover.

Especificações e referências