Preprocessadores CSS Comparados Sass vs. LESS
Existem vários CSS Preprocessor, LESS, Sass, Stylus e Swith CSS, só para citar alguns. Pré-processador CSS, Como dissemos muitas vezes antes, destina-se principalmente a tornar o CSS de autoria mais dinâmico, organizado e produtivo. Mas, a questão é, qual deles faz o trabalho melhor?
Bem, é claro, não daríamos uma olhada em cada um deles, em vez disso, apenas compararíamos dois dos mais populares: Sass e LESS. Para decidir, vamos comparar os dois em sete fatores: o que executa melhor recebe um ponto; em caso de empate, ambos receberão um ponto.
Vamos começar.
Instalação
Vamos começar com o passo fundamental, Instalação. Ambos Sass e LESS são construídos em diferentes plataformas, Sass está rodando em Ruby enquanto LESS é uma biblioteca JavaScript (que é estava na verdade também construído em Ruby no início).
Sass: O Sass precisa do Ruby para funcionar, no Mac isso já foi pré-instalado, mas no Windows você provavelmente precisará instalá-lo antes de começar a jogar com o Sass. Além disso, o Sass precisa ser instalado através do Terminal ou do Prompt de Comando. Existem vários aplicativos de GUI que você pode usar no lugar, mas eles não são gratuitos.
MENOS: O LESS é baseado em JavaScript, portanto, o LESS é tão fácil quanto vincular a biblioteca JavaScript ao seu documento HTML. Existem também alguns aplicativos GUI para ajudar na compilação do LESS para CSS, e a maioria deles é gratuita e funciona muito bem (por exemplo, WinLess e LESS.app).
Conclusão: LESS está claramente na liderança.
Extensões
Tanto o Sass quanto o LESS possuem extensões para um desenvolvimento web mais rápido e fácil.
Sass: Em nosso último post, discutimos sobre o Compass, a atual e popular extensão baseada no Sass. Compass tem um número de Mixins para escrever a sintaxe CSS3 em menos tempo.
Mas o Compass está além de apenas CSS3 Mixins, ele adicionou outros recursos muito úteis, como Auxiliares, Layout, Tipografia, Layout de Grade e até Imagens de Sprite. Ele também tem config.rb arquivo onde podemos controlar a saída CSS e algumas outras preferências. Então, resumindo, o Compass é um pacote completo para fazer desenvolvimento web com o Sass.
MENOS: LESS também tem várias extensões, mas ao contrário da Compass, que tem tudo o que precisamos em um só lugar, elas são separadas e cada uma delas é construída por diferentes desenvolvedores. Isso não será um problema para usuários experientes, mas para aqueles que estão começando com o LESS, eles precisam dedicar algum tempo para escolher as extensões corretas que atendem ao fluxo de trabalho..
Aqui estão algumas extensões LESS que talvez você precise incluir em seu projeto:
- Mixins CSS3: MENOS Elementos, Pré-inicialização, Menos Mixins.
- Grade: 960.gs, Sem moldura, Semantic.gs
- Layout: Ainda menos
- Misc: Twitter Bootstrap
Conclusão: Eu acho que nós temos que concordar que o Sass and Compass é um ótimo duo e que o recurso de imagem do Sprite é realmente incrível, então um ponto para o Sass aqui.
línguas
Cada pré-processador CSS tem seu próprio idioma e eles são mais comuns. Por exemplo, tanto Sass quanto LESS possuem Variáveis, mas não há diferença significativa, exceto Sass define variáveis com um $ assinar enquanto MENOS faz isso com um @ placa. Eles ainda fazem a mesma coisa: armazena um valor constante.
Abaixo, examinaremos alguns dos idiomas mais usados tanto em Sass quanto em LESS (com base em minha experiência).
Aninhamento
Regra de aninhamento é uma boa prática para evitar escrever seletores repetidamente e ambos Sass e LESS têm a mesma forma nas regras de aninhamento;
Sass / Scss e LESS
nav margin: 50px auto 0; largura: 788px; altura: 45px; ul preenchimento: 0; margem: 0;
Mas Sass / Scss leva este método um passo além, permitindo-nos também aninhar propriedades individuais, aqui está um exemplo:
nav margin: 50px auto 0; largura: 788px; altura: 45px; ul preenchimento: 0; margem: 0; border: style: solid; esquerda: largura: 4 px; cor: # 333333; à direita: width: 2px; cor: # 000000;
Este código irá gerar o seguinte resultado.
nav margin: 50px auto 0; largura: 788px; altura: 45px; estilo de borda: sólido; borda-esquerda-largura: 4 px; border-left-color: # 333333; border-right-width: 2px; border-right-color: # 000000; nav ul preenchimento: 0; margem: 0;
Conclusão: Aninhar propriedades individuais é uma boa adição e é considerado melhor pratica, especialmente se seguirmos o princípio DRY (Don't Repeat Yourself). Então, eu acho que está claro qual deles está fazendo melhor neste caso.
Mixins e herança do seletor
Mixins em Sass e LESS são definidos de forma um pouco diferente. Em Sass usamos o@mixin directiva enquanto em menos definimos com seletor de classe. Aqui está um exemplo:
Sass / Scss
@mixin border-radius ($ values) border-radius: $ valores; nav margin: 50px auto 0; largura: 788px; altura: 45px; @include border-radius (10px);
MENOS
.border (@radius) border-radius: @radius; nav margin: 50px auto 0; largura: 788px; altura: 45px; .border (10px);
Mixins, em Sass e LESS, é usado para incluir propriedades de um conjunto de regras para outro conjunto de regras. Em Sass, este método é levado adiante com Herança do Seletor. O conceito é idêntico, mas em vez de copiar todas as propriedades, o Sass estenderá ou agrupará seletores que tenham as mesmas propriedades e valores usando o @ampliar diretiva.
Dê uma olhada neste exemplo abaixo:
.circle border: 1px solid #ccc; raio de fronteira: 50 px; estouro: oculto; .avatar @extend .circle;
Este código resultará como;
.círculo, .avatar border: 1px solid #ccc; raio de fronteira: 50 px; estouro: oculto;
Conclusão: Sass está um passo à frente por herança distinta de mixins e seletores.
Operações
Tanto o Sass quanto o LESS podem fazer operações matemáticas básicas, mas às vezes retornam resultados diferentes. Veja como eles realizam esse cálculo aleatório:
Sass / Scss
$ margin: 10px; div margem: $ margem - 10%; / * Erro de sintaxe: Unidades incompatíveis: '%' e 'px' * /
MENOS
@margin: 10px; div margin: @margin - 10%; / * = 0px * /
Conclusão: Sass, neste caso, está fazendo isso com mais precisão; como% e px não são equivalentes, deve retornar um erro. Embora, na verdade, espero que possa ser algo como 10px - 10% = 9px.
Notificações de erro
Notificação de erro é importante para ver o que estamos fazendo errado. Imagine milhares de linhas de código e um pequeno erro em algum lugar do caos. Uma clara notificação de erro será a melhor maneira de descobrir o problema rapidamente.
Sass: Neste exemplo, estou apenas usando o Prompt de Comando para executar o compilador. Sass irá gerar uma notificação de erro sempre que houver invalidez no código. Neste caso, vamos remover um ponto e vírgula na linha 6, e isso deve se transformar em um erro. Dê uma olhada na imagem abaixo.
Quando vi essa notificação pela primeira vez, mal consegui entender. Além disso, parece Sass é um pouco fora de onde o erro é. Ele disse que o erro está em linha 7, em vez de 6.
MENOS: Com o mesmo cenário de erro, a notificação LESS é mais bem apresentada e também parece ser mais precisa. Dê uma olhada nesta imagem:
Conclusão: O LESS oferece melhor experiência sobre este assunto e vence as mãos para baixo.
Documentação
Documentação é parte muito importante para cada produto; mesmo desenvolvedores experientes achariam difícil fazer as coisas sem Documentação.
SassSe dermos uma olhada na documentação no site oficial, eu, pessoalmente, sinto que estou no meio de uma biblioteca, a documentação é muito abrangente. No entanto, a aparência e a sensação, se isso é importante para você, não é motivacional para a leitura, e o plano de fundo é simples.
A apresentação é muito mais parecida com a documentação do W3 ou WikiPedia. Não sei se esse é o padrão de exibição de documentação na Internet, mas não é a única maneira.
MENOSPor outro lado, a documentação do LESS é mais clara sem muitas explicações de texto e mergulha diretamente nos exemplos. Também tem boa tipografia e um melhor esquema de cores. Acho que foi por isso que o LESS atraiu minha atenção em primeiro lugar e posso aprender mais rápido por causa do layout e da apresentação da documentação.
Conclusão: A apresentação da documentação do LESS é melhor, embora o Sass tenha uma documentação mais abrangente, então acho que podemos chamar isso de empate.
Pensamento final
Eu acho que é uma conclusão clara de que Sass é melhor com uma pontuação total de 5 contra 3 por menos. No entanto, isso não significa que o LESS seja ruim; eles só precisam ser melhores. No final, ainda depende da decisão do usuário final escolher o pré-processador de sua escolha. Seja Sass ou MENOS, contanto que eles estejam confortáveis e mais produtivos, então esse é o vencedor em sua lista.
Por fim, se você tiver algo em mente sobre esse assunto, sinta-se à vontade para compartilhá-lo na caixa de comentários abaixo.
