Tenho vários arquivos em css, estou na duvida se reescrevo ele em sass para poder dar uma manutenção melhor no futuro ou não, será que é realmente vantajoso?
-
Amigo sempre é bom utilizar sass por questões de alterações futuras e agilidade, mas você tem que colocar na balança e analisar se vale a pena o trabalho.– Maycon F. Castro20/09/2018 às 19:58
-
Entendi, vou analisar, são muitos arquivos mais talvez seja vantagem no futuro.– Léo Cunha20/09/2018 às 20:01
-
1Não vale a pena. Primeiro que vejo como trabalho desnecessário, depois que na verdade pode dificultar a manutenção, afinal nem todo dev trabalha com SASS, SCSS etc... então vc limita muito as pessoas que mexem no código, além do mais vc tem que ter um compilador, e a pessoa pode não ter esse compilado de forma ágil. Eu não sei não, só vejo desvantagens... Mas cada um cada um. Achei sua pergunta basada em opiniões...– hugocsl20/09/2018 às 20:17
-
Eu uso gulp para copilar e fazer outras automações de qualquer forma o dev tem que ter uma experiencia a mais para dar manutenção, o sass só seria mais uma tarefa para o gulp fazer.– Léo Cunha20/09/2018 às 20:30
1 Resposta
É um bocado relativo e vai gerar muitas opiniões contraditórias, até porque um dos apetos positivos sobre o SASS
é que não precisas converter CSS
em SASS
, uma vez que o SASS
é uma extensão do CSS
. Por outro lado, o SASS
, dá-te coisas diferentes.
De seguida, apresento alguns benefícios na utilização do SASS
:
- Compatível com o CSS:
Se tens bases de CSS
, perceber e desenvolver SASS
será pacífico. O SASS apresenta duas sintaxes diferentes, o SASS
em si e o SCSS
, que é o mais utilizado. A sintaxe SCSS
é compatível com CSS
, isso implica que se renomeares o ficheiro .css em .scss, terás o ficheiro em SCSS sem qualquer problema.
- Uso de variáveis:
Um dos grandes benefícios de usar o SASS
é a capacidade de usar variáveis. Por exemplo:
$blue: #004BB4;
Depois de criar a variável, pode usá-la onde quiser:
h1 {
color: $blue;
}
- Nested Syntax:
Por outras palavras, permite "aninhar" elementos HTML
utilizando selectores CSS
. Por exemplo:
.navbar {
color: $blue;
}
- Uso de Mixins:
O uso de Mixins entra em ação quando tens blocos de código repetidos. Por exemplo:
@mixin set-font( $family: 'Ubuntu' , $weight: 400 , $style: normal ) {
font-family: $family , 'Arial', 'Helvetica', sans-serif;
font-style: $style;
font-weight: $weight;
}
Depois de ter definido o Mixin, podes utilizá-lo onde quiser, usando o @include:
h1 {
@include set-font;
color: $blue;
}
Se precisares fazer alguma atualização ao Mixin, basta passar os parâmetros dentro da chamada @include.
h1.callout {
@include set-font('Nunito',600);
color: $azul;
}
- Maior comunidade e boa documentção:
Uma das grandes vantagens é sem dúvida a Documentção oficial e Comunidades.
Em suma, há muitos mais benefícios no uso dos pré-processadores CSS
como o SASS
, porque são sempre uma mais valia, visto que ampliam os recursos básicos de CSS
, fornecendo um conjunto de funcionalidades poderosas que elevarão sua produtividade. Para além dos benefícios mencionados acima, o SASS permite-te fazer uso de herança, funções, diretivas de controlo e expressões como if ()
, for ()
ou while ()
, tipos de dados, interpolação, etc.
Se estas a procurar de fazer o refactoring do CSS
em SASS
bem estruturado, basta utilizar algumas ferramentas de conversão, como por exemplo este aqui.