Nossa experiência mudando de menos para sass

Muito já foi escrito sobre a mudança do CSS básico para um pré-processador CSS, e por um bom motivo - os pré-processadores adicionam poder e controle que não podemos obter apenas no navegador. De artigos que exaltar as virtudes de um pré-processador para leituras mais técnicas como a detalhada “ Fazendo a transição para SCSS em escala , 'Eu sinto como se tivesse devorado todos eles.

No HASHTAGS , fizemos algo que não foi escrito tanto sobre como alternar de um pré-processador para outro. No início, Sprout adotou Menos ; tomamos a decisão no final do ano passado de mudar para SCSS, a sintaxe semelhante a CSS do Sass . Dedicamos nosso tempo para garantir que a transição fosse tranquila, e a experiência destacou algumas diferenças profundas entre Less e Sass.

Porque?

Antes de chegarmos ao que aprendemos, sua primeira pergunta - legítima - deve ser: 'Por que se preocupar?' Já nos beneficiamos de variáveis e mixins, @imports e funções de cor. Certamente, Sass tem uma série de recursos que menos faltam, como mapas e funções , mas chegamos até aqui sem eles.

Duas razões principais para a mudança se destacam:

Comunidade: Pesquise no github a extensão lib: scss e, em seguida, pesquise a extensão lib: less. No momento da redação deste artigo, os resultados são claros: 120.234 arquivos SCSS, 29.449 Menos arquivos. A troca oferece acesso a uma gama mais ampla de boas ideias e uma piscina maior de código aberto para nadar. Até a popular biblioteca Bootstrap, uma das razões pelas quais Less permaneceu viável, anunciou está mudando para SCSS .
Velocidade: Libsass rochas. O tempo de construção de nossos estilos melhorou em mais de 500%. Embora o Libsass ainda não tenha atualizado a versão mais recente da especificação Sass, não sentimos falta de nada.

Quão?

Nosso CSS compilado tem quase 19.000 seletores. Após a mudança, o CSS compilado precisava ser quase idêntico; tínhamos que garantir que essa transição fosse invisível para nossos clientes. E quanto aos recursos em andamento? Nosso atualização de composição recente mudou 3.837 linhas de estilos - como a equipe poderia mudar com segurança no meio do caminho?

Consideramos três opções:

Compile tudo para CSS primeiro. É a única maneira de garantir com 100% de precisão que nossos usuários estão obtendo os mesmos estilos e de desligar a mudança em um dia. A ideia de um rompimento limpo é sempre atraente, mas novo código nem sempre é um código melhor . Mesmo com ferramentas como atrevido e css2compass , o tempo que gastaríamos reconstruindo superaria em muito qualquer outra opção.
Escreva novos estilos apenas em SCSS. Nós consideramos desenhar uma linha na areia— Menos está velho e quebrado; Sass é a nova gostosura . Em última análise, rejeitamos essa noção. Muito se ganharia trocando imediatamente, e ninguém queria manter a paridade entre dois conjuntos de mixins e variáveis.
Converta todos os nossos arquivos Less para SCSS e conserte o que está quebrado. Enfrentando a eliminação do histórico ou a adição de outra tarefa de construção para manutenção, começamos a converter tudo.

Limpando a casa

SCSS não é tão diferente de Less, não é? “ Conversão de menos para sass ”Compartilha uma série de pesquisas regex para alterar as diferenças de sintaxe mais óbvias, como .awesome-mixin () vs @mixin awesome-mixin (). Essas pesquisas regex são acumuladas em menos2sass , que examinamos todos os nossos arquivos.

Se fosse assim tão fácil, não haveria muito sobre o que blogar. Algumas solicitações pull persistentes para o script less2sass enfatizam algumas de suas omissões, como diferenças de interpolação de string . Mais desafiadores foram os erros de compilação que encontramos após a conversão, que destacaram diferenças maiores do que uma simples regex poderia resolver. Para ser franco, também encontramos CSS incorreto.

Pegamos esses erros de construção e fizemos uma lista do que precisávamos consertar, e sabíamos que poderíamos consertar a maioria antes de converter os estilos. Decidimos limpar nossos arquivos Less antes de converter.

Fixin ’Mixins

Começamos com a diferença entre como Less e Sass lidam com condicionais. Aqui está uma mistura de gradiente simples que tínhamos:

Sass oferece uma estrutura @ if ... @ else simples, enquanto nosso mixin empregou o que Less chama de guarda mixin . No caso de nosso mixin de gradiente, estávamos usando-o para mudar da sintaxe de rascunho prefixada do fornecedor para a sintaxe W3C. Sabíamos que teríamos que reescrever este mixin.

Então, paramos e demos uma boa olhada em todos os nossos mixins. A maioria deles adicionou prefixos de fornecedor e resolveu diferenças de navegador, como o gradiente mixin acima. Digitar Autoprefixer , uma ferramenta que analisa CSS e aplica prefixos de fornecedores com base em uma lista de navegadores compatíveis. Adicionando Autoprefixer à nossa construção, eliminamos nove mixins. Como bônus, o Autoprefixer remove prefixos desnecessários do fornecedor, o que nos ajudou a identificar alguns cantos empoeirados em nosso CSS e produzir arquivos compilados menores.

Uma boa lição de nossa experiência aqui: não perca tempo convertendo ou refatorando o que você pode excluir.

Outra diferença do mixin que vale a pena notar: Less recomenda separar os parâmetros com ponto e vírgula . Apenas alguns foram escritos dessa forma, mas todos tiveram que ser alterados, nas definições do mixin e onde foram aplicadas. Felizmente, Less é compatível com ponto-e-vírgula e vírgula, portanto, poderíamos fazer essa alteração antes da etapa de conversão.

Número do anjo 0111

Abuso de e comercial

Depois de abordar os mixins, voltamos nossa atenção para outra fonte de erros de compilação: e comercial . É um dos operadores mais poderosos em Sass e Less, e eles funcionam de forma muito semelhante. Exceto quando eles não o fazem. E então eles funcionam de maneira muito diferente.

Por exemplo, com 19.000 seletores, você pode imaginar que nos deparamos com problemas de especificidade, muitas vezes resolvidos rapidamente como:

Less produz h1.modal-header como se poderia imaginar, mas Sass engasga. Tentamos consertar com:

Funciona muito bem com Ruby Sass, mas no momento em que este livro foi escrito, Libsass ainda não suporta este uso . Nós nem consideramos, neste caso, mudar para Ruby Sass. Em vez disso, escrevemos h1.modal-header fora do escopo de .modal. Sabemos que isso é uma indicação de um problema, portanto, puxando o seletor do escopo e chamando-o com um comentário, podemos identificar esses problemas em nosso código mais prontamente.

Piorou quando um E comercial foi usado dessa forma em um mixin. Aqui está um trecho de uma mixagem Less que tínhamos para os botões:

Novamente, a diretiva @ at-root não poderia nos ajudar no Libsass. Nesse caso, tivemos que examinar a causa raiz da substituição da especificidade e resolvê-la. (A boa notícia é que corrigimos isso excluindo três estilos excessivamente específicos em outros lugares.)

Outra diferença entre os e comercial Less e Sass foi realmente útil:

Nossa expectativa era .checkbox-wrap> .checkbox-widget, .radio-wrap> .radio-widget. No entanto, Less processa o E comercial com mais recursão e compilado desta forma:

Em nenhum momento nós - ou usaríamos - um widget de caixa de seleção para um botão de rádio. Felizmente, o Sass realmente resolveu um problema que não conhecíamos porque não estávamos olhando para nosso CSS compilado.

Lição aprendida: observe seu CSS compilado com frequência - caso contrário, você não sabe o que seus usuários estão baixando.

Comparando os resultados

As atualizações para corrigir e remover mixins, resolver discrepâncias de e comercial e resolver alguns outros bits que não seriam convertidos de forma limpa ocorreram em sete commits ao longo de um mês. Foi bom limpar a casa e identificar oportunidades futuras de refatoração.

No entanto, não importa a aparência do nosso código-fonte; é o que é entregue aos nossos usuários que conta. Nós consideramos gerar ASTs para comparar nosso CSS compilado. Após alguma pesquisa e experimentação, ficou claro que tudo que precisávamos era uma maneira de saber se muito pouco mudou no CSS compilado. Portanto, os bons e antiquados diffs seriam suficientes - quanto menor o diff, melhor. Cada solicitação de pull veio com uma comparação dos resultados antes e depois da compilação Less. A ferramenta de desenvolvedor Xcode FileMerge foi muito útil comparar os resultados lado a lado. Se vimos algo que não esperávamos, voltamos para investigar.

Nós ficamos com FileMerge e diffs uma vez que entramos em nossa debandada regex de localizar e substituir e realmente converter os arquivos para SCSS. No entanto, os resultados compilados por dois pré-processadores diferentes tornaram nossos diffs inúteis por causa das diferenças na tabulação e no posicionamento dos colchetes. Adicionamos uma etapa extra para normalizar o formato do CSS antes e depois com um script de nó simples . Ele minimiza o CSS e depois o embeleza. Não poderia ser mais simples.

Normalizar a formatação ajudou muito, mas vasculhar o diff ainda demorou cerca de dois dias inteiros de revisão. Um processo gratificante, mas árduo. Duvidamos que uma solução AST personalizada teria ajudado a acelerar a revisão. Todas as diferenças tiveram que ser tratadas.

Mas as diferenças eram mínimas. Seletores em uma ordem ligeiramente diferente, arredondamento decimal e até pequenas diferenças nos resultados das funções de cor. Cada diferença foi verificada cuidadosamente antes de colocar nosso Sassed-up CSS em produção.

Qual é o próximo

Após a fusão, o trabalho em andamento dificilmente foi interrompido. Menos arquivos ainda em desenvolvimento eram fáceis de converter, graças a todo o trabalho de preparação feito antes do tempo. Todo mundo estava pronto e funcionando em cerca de dois dias. Até mesmo a equipe redesenhada do Compose foi capaz de regexar seu caminho para SCSS em questão de horas. Planejar com antecedência e limpar os estilos existentes antes de puxar o interruptor fez toda a diferença.

Agora estamos avançando com a identificação de padrões, dividindo grandes arquivos CSS em módulos, auditando CSS em produção para seletores não utilizados e gastando mais tempo em ferramentas para comparar ASTs ou alguma outra representação analisada de nosso CSS. Eu mencionei que temos quase 19.000 seletores CSS? Estamos trabalhando nisso, mas esse é outro artigo totalmente.

Compartilhe Com Os Seus Amigos: