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.
últimas postagens
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 formato .css 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 frontend, como Vite, permitem incluir pré-processadores CSS como LessCSS em seu projeto.
Como funciona o Stylus CSS
Para instalar o Stylus em seu ambiente local, você precisa do Node.js e do Node Package Manager (NPM) ou Yarn instalado em sua máquina. Execute o seguinte comando de terminal:
npm install stylus
Ou:
yarn add stylus
Cada arquivo Stylus CSS termina em uma extensão .styl. Depois de escrever o código Stylus CSS, você pode compilá-lo com este comando:
stylus .
Isso deve compilar todos os arquivos .styl e os arquivos .css de saída no diretório atual. O compilador Stylus também torna possível compilar arquivos .css em .styl com o sinalizador –css. Para converter um arquivo .css para o formato .styl, 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:
.container
margin: 10px
O bloco de código acima compila para o seguinte CSS:
.container {
margin: 10px;
}
Assim como em pré-processadores CSS como Less, você pode referenciar um seletor pai com o caractere &:
button
color: white;
&:hover
color: yellow;
Que compila para:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Como usar variáveis no Stylus CSS
Em pré-processadores CSS como Less CSS, você define variáveis com o caractere @, 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á-la a um valor:
bg-color = black
Agora você pode usar a variável no arquivo .styl assim:
div
background-color: bg-color
Os blocos de código acima são compilados para o seguinte CSS:
div {
background-color: #000;
}
Você pode definir uma variável nula com parênteses. Por exemplo:
empty-variable = ()
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:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Isso funcionaria, mas você também pode evitar criar a variável completamente e referenciar o valor da propriedade width:
div
width: 563px
height: (@width / 2)
Neste bloco de código, o símbolo @ permite que você faça referência à propriedade de largura real no div. Independentemente da abordagem escolhida, ao compilar o arquivo .styl, você deve obter o seguinte CSS:
div {
width: 563px;
height: 281.5px;
}
Funções no Stylus CSS
Você pode criar funções que retornam valores no Stylus CSS. Digamos que você queira definir a propriedade text-align de um div como “center” se a largura for maior que 400px, ou “left” se a largura for menor que 400px. Você pode criar uma função que lida com essa lógica.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Este bloco de código chama a função alignCenter, passando o valor da propriedade width referenciando-o com o símbolo @. A função alignCenter verifica se seu parâmetro, n, é maior que 400 e retorna “center” se for. Se n for menor que 200, a função retorna “esquerda”.
Quando o compilador é executado, ele deve produzir a seguinte saída:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
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:
subtract(b:30px, a:10px)
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.