O que é Stylus CSS e como usá-lo?

Quando se trata de desenvolvimento web, a maneira mais comum de estilizar um aplicativo é usar CSS. No entanto, CSS pode ser complicado de se trabalhar porque é notoriamente difícil de depurar.

Aprenda a usar Stylus CSS, e você terá outra opção, com um dos pré-processadores de CSS mais populares disponíveis.

O que é um pré-processador CSS?

Pré-processadores CSS são utilitários que facilitam a escrita de CSS. Eles geralmente compilam o código de sua própria sintaxe personalizada para o .css formato que os navegadores podem entender.

Pré-processadores CSS como Sass, por exemplo, oferecem recursos especiais como loops, mixins, seletores aninhados e instruções if/else. Esses recursos facilitam a manutenção do seu código CSS, especialmente em equipes grandes.

Para usar um processador CSS, você deve instalar o compilador em seu ambiente local e/ou servidor de produção. Algumas ferramentas de construção de front-end, como o Vite, permitem incluir

Pré-processadores CSS como LessCSS no seu projecto.

Como funciona o Stylus CSS

Para instalar o Stylus em seu ambiente local, você precisa do Node.js e Gerenciador de pacotes de nós (NPM) ou Yarn instalado em sua máquina. Execute o seguinte comando de terminal:

caneta de instalação npm

Ou:

fio adicionar estilete

Cada arquivo Stylus CSS termina em um .estilo extensão. Depois de escrever o código CSS do Stylus, você pode compilá-lo com este comando:

caneta .

Isso deve compilar todos os .estilo arquivos e saída .css arquivos no diretório atual. O compilador Stylus também torna possível compilar .css arquivos em .estilo com o --css bandeira. Para converter um .css arquivo para o .estilo formato, use este comando:

stylus --css style.css style.styl

Sintaxe e seletores pais no Stylus CSS

No CSS tradicional, você define um bloco de estilo com chaves; a falha em incluir esses caracteres resultará em estilos corrompidos. No Stylus CSS, o uso de colchetes é opcional.

O Stylus oferece suporte a uma sintaxe semelhante ao Python, o que significa que você pode definir blocos usando indentações, assim:

.recipiente
margem: 10px

O bloco de código acima compila para o seguinte CSS:

.recipiente {
margem: 10px;
}

Assim como em pré-processadores CSS como Less, você pode referenciar um seletor pai com o & personagem:

botão
cor: branco;
 &:flutuar
cor: amarelo;

Que compila para:

botão {
cor: #fff;
}
botão:flutuar {
cor: #ff0;
}

Como usar variáveis ​​no Stylus CSS

Em pré-processadores CSS como Less CSS, você define variáveis ​​com o @ personagem, enquanto o CSS tradicional usa "--" para definir uma variável.

No Stylus, as coisas são um pouco diferentes: você não precisa de um símbolo especial para definir uma variável. Em vez disso, apenas defina a variável usando um sinal de igual (=) para vinculá-lo a um valor:

bg-color = preto

Agora você pode usar a variável no .estilo arquivo assim:

div
cor de fundo: bg-color

Os blocos de código acima são compilados para o seguinte CSS:

div {
cor de fundo: #000;
}

Você pode definir uma variável nula com parênteses. Por exemplo:

variável vazia = ()

Você pode fazer referência a outros valores de propriedade usando o @ símbolo. Por exemplo, se você deseja definir a altura de um div como metade de sua largura, faça o seguinte:

largura do elemento = 563px
div
largura: largura do elemento
altura: (largura do elemento / 2)

Isso funcionaria, mas você também pode evitar criar a variável completamente e referenciar o largura valor da propriedade em vez disso:

div
largura: 563px
altura: (@largura / 2)

Neste bloco de código, o @ símbolo permite que você faça referência ao real largura propriedade no div. Independentemente da abordagem escolhida, ao compilar o .estilo arquivo, você deve obter o seguinte CSS:

div {
largura: 563px;
altura: 2810,5 px;
}

Funções no Stylus CSS

Você pode criar funções que retornam valores no Stylus CSS. Digamos que você queira definir o alinhamento de texto propriedade de um div para "center" se o largura é maior que 400px, ou "esquerda" se o largura é inferior a 400px. Você pode criar uma função que lida com essa lógica.

alinharCentro(n)
se (n > 400)
 'Centro'
outrose (n < 200)
 'esquerda'
div {
largura: 563px
alinhamento de texto: alinharCentro(@largura)
altura: (@largura / 2)
}

Este bloco de código chama o alinharCentro função, passando o largura valor da propriedade referenciando-o com o @ símbolo. O alinharCentro função verifica se seu parâmetro, n, é maior que 400 e retorna "center" se for. Se n for menor que 200, a função retornará "esquerda".

Quando o compilador é executado, ele deve produzir a seguinte saída:

div {
largura: 563px;
alinhamento de texto: 'Centro';
altura: 2810,5 px;
}

Na maioria das linguagens de programação, as funções atribuem parâmetros com base na ordem em que você os fornece. Isso pode levar a erros como resultado da passagem de parâmetros na ordem errada, o que é mais provável quanto mais parâmetros você tiver que passar.

A Stylus fornece uma solução: parâmetros nomeados. Use-os em vez de parâmetros ordenados ao chamar uma função, assim:

subtrair(b:30px, a:10px)/*-20px*/

Quando usar um pré-processador CSS

Os pré-processadores CSS são utilitários muito poderosos que você pode usar para simplificar seu fluxo de trabalho. Escolher a ferramenta certa para o seu projeto pode ajudar a melhorar sua produtividade. Se o seu projeto precisa de apenas uma pequena quantidade de CSS, usar um pré-processador de CSS pode ser um exagero.

Se você estiver construindo um projeto grande, talvez como parte de uma equipe, que depende de uma grande quantidade de CSS, considere o uso de um pré-processador. Eles oferecem recursos como funções, loops e mixins que facilitam o estilo de projetos complexos.