No desenvolvimento web, a estilização de aplicações é frequentemente realizada com CSS. Contudo, o CSS pode apresentar desafios, especialmente na depuração.
Ao aprender a usar Stylus CSS, você adquire uma alternativa, um dos pré-processadores de CSS mais populares disponíveis, que pode simplificar seu processo de estilização.
O que é um Pré-processador CSS?
Pré-processadores CSS são ferramentas que facilitam a escrita de CSS. Eles geralmente convertem o código de uma sintaxe personalizada para o formato .css, que é compreendido pelos navegadores.
Pré-processadores como Sass oferecem recursos avançados, como loops, mixins, seletores aninhados e instruções condicionais (if/else). Essas funcionalidades tornam a manutenção do código CSS mais simples, especialmente em grandes projetos com várias pessoas trabalhando.
Para utilizar um pré-processador CSS, é necessário instalar o compilador no seu ambiente local ou servidor. Algumas ferramentas de construção de frontend, como o Vite, permitem incluir pré-processadores como LessCSS diretamente no projeto.
Como o Stylus CSS Funciona
Para instalar o Stylus no seu computador, você precisa ter o Node.js e o Node Package Manager (NPM) ou Yarn instalados. Execute o seguinte comando no terminal:
npm install stylus
Ou:
yarn add stylus
Arquivos Stylus CSS têm a extensão .styl. Após escrever o código Stylus, você pode compilá-lo com este comando:
stylus .
Este comando compilará todos os arquivos .styl e gerará os arquivos .css correspondentes no diretório atual. O compilador Stylus também permite converter arquivos .css em .styl usando o sinalizador `–css`. Para converter um arquivo .css para o formato .styl, utilize este comando:
stylus --css style.css style.styl
Sintaxe e Seletores Parentais no Stylus CSS
No CSS tradicional, os blocos de estilo são definidos usando chaves; a omissão desses caracteres pode resultar em estilos incorretos. No Stylus CSS, as chaves são opcionais.
O Stylus adota uma sintaxe similar à do Python, onde blocos são definidos através de indentações:
.container
margin: 10px
O código acima é compilado para o seguinte CSS:
.container {
margin: 10px;
}
Assim como em pré-processadores como Less, você pode referenciar o seletor pai com o caractere `&`:
button
color: white;
&:hover
color: yellow;
Que será compilado para:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Como Utilizar Variáveis no Stylus CSS
Em pré-processadores CSS como Less, variáveis são definidas com o caractere `@`, enquanto no CSS tradicional se usa `”–“`.
No Stylus, a abordagem é um pouco diferente: não é necessário um símbolo especial para definir variáveis. Utilize o sinal de igual (`=`) para vincular um nome a um valor:
bg-color = black
Agora você pode usar essa variável em seu arquivo .styl:
div
background-color: bg-color
Que será compilado para:
div {
background-color: #000;
}
Variáveis nulas podem ser definidas com parênteses:
empty-variable = ()
Você pode referenciar outros valores de propriedade com o símbolo `@`. Por exemplo, se você quiser definir a altura de um `div` como metade de sua largura:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Essa abordagem funcionaria, mas é possível referenciar a propriedade `width` diretamente, sem criar uma variável extra:
div
width: 563px
height: (@width / 2)
Nesse caso, o `@` permite acessar o valor da propriedade `width` do `div`. Ambas as abordagens resultarão no seguinte CSS:
div {
width: 563px;
height: 281.5px;
}
Funções no Stylus CSS
Stylus CSS permite criar funções que retornam valores. Suponha que você queira definir a propriedade `text-align` de um `div` como “center” se a largura for maior que 400px, ou “left” se for menor. Você pode criar uma função para essa lógica.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Nesse código, a função `alignCenter` é chamada, passando o valor da propriedade `width` acessado com o `@`. Se o parâmetro `n` for maior que 400, a função retornará “center”. Se `n` for menor que 200, retornará “left”.
O compilador produzirá o seguinte CSS:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
Em várias linguagens de programação, os parâmetros de funções são atribuídos com base na ordem em que são fornecidos. Isso pode gerar erros se os parâmetros forem passados na ordem incorreta, especialmente com muitas variáveis.
O Stylus oferece parâmetros nomeados. Utilize-os em vez de parâmetros posicionais ao chamar uma função:
subtract(b:30px, a:10px)
Quando Usar um Pré-processador CSS
Pré-processadores CSS são ferramentas valiosas que podem simplificar seu fluxo de trabalho. A escolha da ferramenta correta pode melhorar a produtividade. Se seu projeto requer apenas uma pequena quantidade de CSS, utilizar um pré-processador pode ser excessivo.
Se você estiver construindo um projeto grande, especialmente em equipe, com muito CSS, considere o uso de um pré-processador. Eles oferecem recursos como funções, loops e mixins, facilitando a estilização de projetos complexos.