61
algum outro aplicativo com esses
mecaQismos Q¥o precisa Ge mais
nada. Basta digitar a primeira linha
de comando acima para instalar
o Myth. Se nunca usou esses
sistemas, entre no link abaixo e
instale o NodeJS:
.
'epois de instalar o NodeJS
se ainda n¥o o Ie] e rodar a linha
de comando acima, o próximo
passo é gerar o arquivo CSS de
origem. Ou seja: o arquivo em
que escreverá seu código CSS
da forma como preferir e com os
comandos que necessitar.
Com esse arquivo de origem
pronto, salvo no mesmo diretório
onde instalou o Myth (que será o
diretório em que rodou a linha de
comando de instala©¥o , digite a
segunda linha de comando:
myth input.css output.css
O Myth vai pré-processar
todo seu código. Ele gera um
arquivo CSS de saída para usar
em seu layout, já com todos
os ajustes para diferentes
navegadores e tudo o mais.
Mas o que exatamente a mais
o Myth fará? Como trabalhar com
a codiíca©¥o de origem de CSS
para que o Myth faça sua mágica?
&RGLëTXH
com o Myth
Um primeiro passo
experimental é usar o Myth para
processar um código CSS já
escrito, seu ou de outra pessoa.
Salve o arquivo CSS em um
diretório acessível ao Myth, com o
nome origem.css. Pode pegar um
CSS pronto, apenas para teste, e
salvar no diretório. 'epois, digite
a segunda linha de comando já
apresentada.
Myth origem.css
destino.css
Pronto, um novo arquivo
chamado destino.css foi gerado.
Todo código foi ajustado para
ser lido por qualquer navegador.
Pode-se abrir o arquivo de destino
para ver as mudanças feitas pelo
pré-processador Myth.
Por exemplo, se no arquivo
de origem houvesse algumas
variáveis que seriam usadas na
descriç¥o de elementos, seria um
código parecido com este:
/**
* Variables.
*/
:root {
--light-purple: #989EBA;
--purple: #847AD1;
--dark-purple: #26202B;
--darker-purple: #1C1521;
--blue: #5790EF;
}
Seu uso completo em algum
dos elementos seria como
neste código abaixo:
body {
font: 100 16px/1.5 "Source
Sans", sans-serif;
color: white;
background-color: var(--
arker-purple);
}
a {
color: var(--purple);
text-decoration:
underline;
transition: color .2s;
}
No arquivo de destino
teríamos esta saída em código,
já ajustado para ser lido em
qualquer navegador:
/**
* Variables.
*/
/**
* Body.
*/
body {
font: 100 16px/1.5 "Source
Sans", sans-serif;
color: white;
background-color: #1C1521;
}
a {
color: #847AD1;
text-decoration:
underline;
-webkit-transition: color
.2s;
transition: color .2s;
}
Pode n¥o parecer ¢ primeira
vista muito útil ou impressionante.
Porém, para quem precisa ajustar
um arquivo CSS com centenas,
dezenas de centenas, de linhas
de código que devem se adaptar
a diversos navegadores é uma
ferramenta muito importante.
Outro elemento do código seria
este, que deíne características para
uma seç¥o:
.Section--feature .Section
example-code {
width: 50%;
float: left;
box-sizing: border-box;
O Myth ajuda a ajustar
um arquivo CSS com
centenas de linhas
Um passo
experimental é
usar o Myth para
processar um
código CSS
já escrito
[
O MYTH É UMA FERRAMENTA QUE FAZ O PRÉ-PROCESSAMENTO DE SEU
CÓDIGO, AMPLIA RECURSOS E FACILITA O USO DE ELEMENTOS CSS.
]
REVISTA LOCAWEB
