Executando verificação de segurança...
6
harrisonrodrigues
1 min de leitura ·

SCSS ainda é muito utilizado em 2024?

Olá a todos!

Estou trabalhando em um projeto da empresa na qual trabalho, que ainda está na fase inicial.
Ele está sendo construído com NextJS, NestJS e OracleDB.
No NextJS estamos utilizando TailwindCSS, porém acho extramamente ruim aquelas classnames enormes que o tailwind proporciona.

Eu estou pensando seriamente se ainda é interessante utilizar SCSS, visto que uma das coisas que me atrai muito nele, é o nesting dos seletores CSS.

Porém, ano passado se não me engano, o CSS ganhou o nesting utilizando o &, que deixou a forma de escrever o código muito atraente, não sendo mais necessário aquela repetição toda de código.

Quais são as outras vantagens que o SCSS pode proporcionar hoje em dia?

Pelo pouco que tenho de conhecimento, sei que o SCSS também tem um esquema de variáveis muito interessante, mas nao tenho certeza do quão útil isso pode vir a ser...

Código CSS antigo

.container {
  color: red;
}

.container .child {
  background-color: blue;
}

.container .child .grandchild {
  font-size: 14px;
}

Código CSS novo

.container {
  color: red;
  
      & > .child {
          background-color: blue;
          
          & > .grandchild {
              font-size: 14px;
          }
      }
}

Código SCSS

.container {
  color: red;

  .child {
    background-color: blue;

    .grandchild {
      font-size: 14px;
    }
  }
}
Carregando publicação patrocinada...
5
alms

Acho que deve haver uma ou outra empresa que utiliza, mas, honestamente, prefiro o Tailwind pela padronização, mesmo que fique aquele monte de classes. Isso pode ser mitigado se você tiver paciência para usar a diretiva @apply, mas, honestamente, não perco mais meu tempo escrevendo CSS há um tempinho. Kkkkk.

1
4
juliusCaezar

Cara eu parei de usar SCSS há muito tempo mas posso dar uma dica de tailwind, você pode criar uma arquivo separado de estilização normal e usar o @layer do tailwind para criar toda a estilização lá, sinceramente eu já usei assim e gostava deixava o componente mais limpo.

DocDoTailwind

1
1
jeffcarlosbd

No meu trabalho estamos usando tailwind... sobre a quantidade de classes, estamos usando a lib tw-merge, passando um array de strings e segmentando grupos de classes em cada string +- assim:

merge([
  'p-8 m-8',
  'sm:p-10 sm:p-10',
  'lg:etc...'
])

E você vai segmentando de acordo com sua necessidade como dark: ou hover: etc ...

1
dbarjs

O tw-merge é sensacional! Mas quer melhorar?

Existe a lib tailwind-variants que transforma a forma como trabalhamos com Tailwind. E o melhor, ela usa o tw-merge por baixo dos panos. :)

É possível criar temas completos de componentes, que suporta slots (elementos), variantes, herança e por aí vai.

Docs: https://www.tailwind-variants.org/

1
Thunay

Na minha opinião, o diferencial do SCSS pro CSS hoje em dia, é por ser uma linguagem compilada, permitindo que você use variáveis, array, foreach, if-else, etc... Com um pouco de criatividade, dá pra fazer umas coisas bacanas com o SCSS e criar muitas classes reutilizáveis e dinâmicas.

Mas eu particularmente prefiro o Tailwind, porque ele ja cria classes dinamicas de forma mais facil, o unico defeito é as classes ficarem sujas, mas com o @apply da pra consertar isso.

1
1
1
heliomarpm

eu ainda utilizo scss por causa da possibilidade de criar repetições entre algumas outras coisas.

ion-list ion-item {
    margin-left: -16px;
}
$statusPedido: (
    1: var(--status-color-pendente), 
    2: var(--status-color-aprovado),
    3: var(--status-color-enviado),
    4: var(--status-color-finalizado),
    5: var(--status-color-cancelado),
    6: var(--status-color-reembolsado),
);

@each $id_status, $color in map-remove($statusPedido) {
    ion-item[statusPedido='#{$id_status}'] div {
        border-radius: 10px 0 0 10px;
        border-left: 5px solid $color;
        padding: 8px 8px 8px 8px;
        width: 100%;
    }
}