1

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?

4
  • 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. 20/09/2018 às 19:58
  • Entendi, vou analisar, são muitos arquivos mais talvez seja vantagem no futuro.
    – Léo Cunha
    20/09/2018 às 20:01
  • 1
    Nã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...
    – hugocsl
    20/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 Cunha
    20/09/2018 às 20:30

1 Resposta 1

0

É 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.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .