O que é o Stylus CSS e como é que o utiliza?

As CSS são normalmente utilizadas como o meio predominante de estilização de aplicações Web, embora as suas complexidades possam dificultar a navegação e a depuração.

Ao familiarizar-se com a utilização do Stylus CSS, estará equipado com uma opção adicional entre os pré-processadores CSS mais utilizados.

O que é um pré-processador CSS?

A utilização de pré-processadores CSS facilita a escrita de folhas de estilo em cascata, simplificando a sua sintaxe, sendo que estes programas utilitários convertem normalmente o código numa sintaxe personalizada específica para o formato .css universalmente reconhecido, que é facilmente compreendido pelos navegadores Web.

A utilização de pré-processadores CSS como o Sass apresenta uma infinidade de vantagens, incluindo a disponibilidade de funcionalidades avançadas, nomeadamente loops, mixins, selectores aninhados e instruções condicionais. A incorporação destas capacidades permite uma gestão mais eficiente dos códigos CSS, particularmente em ambientes de colaboração alargada.

Para utilizar um processador CSS, é necessário instalar o compilador localmente ou no servidor de produção. Algumas ferramentas de compilação front-end, como o Vite, permitem a integração de pré-processadores CSS, incluindo o LessCSS, no projeto.

Como o Stylus CSS funciona

Para configurar o Stylus localmente, é necessário ter o Node.js com o Node Package Manager (NPM) ou o Yarn instalado no sistema. Para prosseguir, execute o seguinte comando no terminal:

 npm install stylus 

Ou:

 yarn add stylus 

O sufixo padrão para os ficheiros CSS do Stylus é “.styl”. Para compilar o código CSS Stylus, pode utilizar o seguinte comando:

 stylus .
 

O processo acima mencionado envolve a compilação de todos os ficheiros .styl no diretório atual utilizando o compilador Stylus. Além disso, o compilador Stylus permite a conversão de ficheiros .css para o formato .styl, utilizando a opção -css. Para efetuar essa transformação, pode-se executar o seguinte comando:

 stylus --css style.css style.styl 

Sintaxe e seletores de pais no Stylus CSS

No CSS convencional, a utilização de chaves é obrigatória para delinear um bloco de estilos; a omissão desses caracteres resulta em estilos interrompidos. Por outro lado, no Stylus CSS, a utilização de chavetas é opcional.

O Stylus fornece uma sintaxe semelhante à do Python, permitindo aos utilizadores delinear blocos através da indentação, como demonstrado abaixo:

 .container
    margin: 10px
 

O código acima mencionado, após compilação, resulta na folha de estilo subsequente:

 .container {
  margin: 10px;
}
 

De forma semelhante à utilização de pré-processadores CSS como o Less, é possível

 button
    color: white;
    &:hover
        color: yellow;
 

Que compila para:

 button {
  color: #fff;
}

button:hover {
  color: #ff0;
} 

Como utilizar variáveis no Stylus CSS

Em pré-processadores CSS como o Less CSS, a utilização do símbolo ‘@’ é empregue para definir variáveis, enquanto o CSS convencional emprega a utilização de ‘-’.

No Stylus, o processo de definição de variáveis afasta-se da abordagem convencional. Ao contrário de outras linguagens de programação que requerem um símbolo específico para denotar a criação de uma variável, o Stylus permite a criação de uma variável através da utilização do sinal de igual (=) para lhe atribuir um valor.

 bg-color = black
 

O trecho de código acima sugere que se pode empregar a referida variável no referido ficheiro .styl de forma indeterminada, incorporando-a nas especificações de estilo estético do referido documento de uma forma caraterística do referido formato.

 div
    background-color: bg-color
 

O código acima referido, quando processado, gera a folha de estilos subsequente na sua totalidade.

 div {
  background-color: #000;
}
 

As variáveis nulas são frequentemente indicadas pela utilização de parênteses, como em “null(value)”. Este símbolo indica que ainda não foi atribuído nenhum valor à variável.

 empty-variable = ()
 

 element-width = 563px

div
    width: element-width
    height : (element-width / 2)
 

Em vez de criar uma nova variável para armazenar o valor da propriedade width , pode simplesmente referir-se a ela diretamente no seu código.

 div
    width: 563px
    height: (@width / 2)
 

A referência à propriedade width real no elemento div pode ser conseguida através da utilização do símbolo “@”, que permite aludir à propriedade específica em questão na folha de estilo. Ao compilar o ficheiro .styl, será gerado um resultado CSS que reflecte a abordagem de estilo escolhida.

 div {
  width: 563px;
  height: 281.5px;
}
 

Funções no Stylus CSS

No Stylus CSS, é possível criar funções que devolvem valores. Suponha que se pretende definir a propriedade text-align de uma div de modo a que, se a sua largura exceder os 400 pixels, o alinhamento seja centrado e, se não exceder os 400 pixels, o alinhamento seja à esquerda. Neste caso, pode ser criada uma função para lidar com a lógica associada.

 alignCenter(n)
    if (n > 400)
        'center'
    else if (n < 200)
        'left'

div {
    width: 563px
    text-align: alignCenter(@width)
    height: (@width / 2)
}
 

O trecho de código mencionado acima invoca a função alignCenter , passando o valor da propriedade width através da notação de referência denotada pelo símbolo @ . A função alignCenter avalia se o seu argumento, n , ultrapassa o limiar de 400. No caso de o argumento ultrapassar este limite, a função devolve a cadeia “centro”, enquanto que se n for inferior a 200, a função devolve “esquerda”.

Após a execução do compilador, a saída subsequente será a seguinte

 div {
  width: 563px;
  text-align: 'center';
  height: 281.5px;
}
 

As funções em muitas linguagens de programação atribuem convencionalmente os parâmetros de acordo com a ordem pela qual são apresentados. Consequentemente, isto pode causar erros devido a uma atribuição incorrecta de parâmetros resultante da reorganização dos mesmos, especialmente quando há um maior número de parâmetros a transmitir.

O Stylus oferece uma solução através da implementação de parâmetros nomeados, que podem ser utilizados em vez de parâmetros ordinais ao invocar uma função, como demonstrado abaixo:

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

Quando utilizar um pré-processador de CSS

A utilização de pré-processadores de CSS pode aumentar significativamente a produtividade, simplificando o processo de fluxo de trabalho. A seleção de uma ferramenta adequada para um determinado projeto é crucial, uma vez que pode maximizar ou minimizar os benefícios obtidos com estes pré-processadores. Nos casos em que um projeto requer quantidades mínimas de CSS, a utilização de um pré-processador CSS pode revelar-se redundante.

A utilização de um pré-processador é altamente recomendada para gerir grandes quantidades de código CSS num ambiente de desenvolvimento colaborativo, dadas as suas capacidades de oferecer funcionalidades como funções, loops e mixins que facilitam o processo de estilização de projectos complexos.