Reprodução

CSS: Agilizando o trabalho com stylus

Certamente surge no meio disto uma questão. Mas para quê usar este tal de Stylus?
Bom, a resposta é bem símples e satisfatória. Quem não gosta de poupar o trabalho de escrever tantas linhas de códigos e depois ter que verificar se faltou uma vírgula um ; (ponto e vírgula), enfim?. Uma das vantagens em usar o Stylus é certamente esta. Na forma natural de se escrever o CSS nota que começa com o nome da Classe ou ID da div e dentro de {} a estilização do mesmo, certo?. Já no stylus não precisamos necessariamente colocar

Certamente surge no meio disto uma questão. Mas para quê usar este tal de Stylus?
Bom, a resposta é bem símples e satisfatória. Quem não gosta de poupar o trabalho de escrever tantas linhas de códigos e depois ter que verificar se faltou uma vírgula um ; (ponto e vírgula), enfim?. Uma das vantagens em usar o Stylus é certamente está. Na forma natural de se escrever o CSS nota que começa com o nome da Classe ou ID da div e dentro de {} a estilização do mesmo, certo?. Já no stylus não precisamos necessariamente colocar

: ; {}

uma vez que ele vai colocar isto automaticamente no nosso ficheiro css final depois de compilado… Isto já agiliza-te o trabalho poís não?. :D ### Mãos a obra.. Para quem ainda não estiver familiarizado com o NodeJs/Npm (que será mesmo obrigatório estar, pois faremos o uso das ferramentas em referência), recomendo que dê uma lida no manual do NodeJs e Node Package Manager e depois volte pra cá. ### Preparando o ambiente Já tendo o Nodejs e npm instalado na sua máquina, o primeiro passo é instalar o stylus para então podermos trabalhar. Abra a linha de comandos (prompt) e digite:

1

sudo npm install -g stylus

Aguarde a instalação estar concluida e acesse o diretório (pasta) onde irás trabalhar com o stylus, no meu caso criei uma pasta nomeada demo, onde teremos a estrutura;

demo

| — — — /css

| — — — /stylus

| — — — — master.styl

Um outro ponto forte do Stylus é que a cada alteração que fores fazendo no ficheiro .styl será compilado para o ficheiro .css sempre que salvares (ctrl+s) evitando assim teres que abrir a linha de comandos para executar o comando para compilação. Entre na pasta principal, no meu caso demo. Na linha de comandos digite:

stylus --watch css/stylus/master.styl --out css/

Com o comando acíma indica ao stylus que; — watch (assista) o ficheiro master.styl que se encontra em css/stylus/ e — out css/ (compile o css final na pasta css). Facíl não?. O resultado do comando acíma deve ser semelhante o que apresento em baixo, caso contrário verifique bem se fez tudo certo.

janilson@mentedigital:~/demo$ stylus — watch css/stylus/master.styl — out css
watching /usr/lib/node_modules/stylus/lib/functions/index.styl
compiled css/master.css
watching css/stylus/master.styl

Agora que já colocamos o nosso compilador em modo arranque, vamos fazer uma coisa básica, vamos mexer um pouco no master.styl lembrando que você não vai escrever o css no ficheiro master.css e sim no master.styl, antes porque o master.css vai ser gerado a partir do master.styl..Supondo que temos uma página .html, onde temos três divs com as classes CONTEUDO, TITULO e POST-CONTEUDO (tú podes criar uma página com a estrutura que quiseres e chamar o css lá). Eís o meu código no master.styl :

.conteudo
widht 700px
height 230px
background #ddd margin auto

.titulo line-height 20px
.titulo h1 font-size 50px
color red text-align center

.area-conteudo
widht 600px
height 200px

.area-conteudo
p font-size 14px
color #000
text-align center
line-height 20px

Abaixo o ficheiro master.css depois de compilado:

.conteudo {
widht: 700px; height: 230px; background: #ddd; margin: auto;
}
.titulo { line-height: 20px;
}
.titulo h1 { font-size: 50px; color: #f00; text-align: center;
}
.area-conteudo { widht: 600px; height: 200px;
}
.area-conteudo p { font-size: 14px;
color: #000; text-align: center; line-height: 20px;
}

Como vêm, depois de compilado o arquivo ele gera os : ; {} onde requer que tenha.
No exemplo a seguir veremos outro método de atibuição dos valores que é usando variáveis. Onde primeiro definimos a variável X, valores da variável X e estes valores passam a ser reaprovetaveis, veja.

color = red
font-size = 16px

texto
color color
font-size font-size

paragrafo color color font-size font-size

Mais ai se quiser definir variáveis diferentes?

Nos casos em que por exemplo pretendes usar estes métodos das variáveis mas que queiras definir paramétros diferentes, deve-se colocar o prefixo $ numa delas e olha como fica:

color = red
font-size = 16px

$color = #000
$font-size = 20px

texto color color
font-size font-size

paragrafo
color $color
font-size $font-size

E como podem ver, a uma diferença entre os dois últimos exemplos em que um faço o uso do préfixo $ e no outro não.

Finalizando..

Foi bom escrever para vocês e espero brevemente voltar com mais dicas sobre o Stylus, que é um dos (senão o melhor) Pré-processador/es existent/es. Porém, para quem deseja também estudar outras pre-processors, indico o Less e o Sass (embora ainda não tenha analisado e/ou usado).

Ficou com alguma dúvida, tem alguma sugestão? Deixe no comentário que breve lhe respondo. Ou se quiser me conhecer, contactar-me pelo Email ou se preferir conectar no Facebook e no Twitter.

Não deixe de partilhar o a matéria nas redes socias para que mais pessoas possam ler e quiça aprender.

Originally published at mentedigital.github.io.