Instale a Stylus no ArchLinux sem morrer na tentativa

Estilete é um pré-processador de código APF, o que nos permite trabalhar de forma mais simples em nosso editor de texto e depois explicar os motivos de minha afirmação.

Estilete

Eu não pretendo ensinar como funciona Estilete, mas mostre alguns exemplos e o método de instalação

Esta é uma folha de estilo como a conhecemos:

corpo {fonte: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; raio da borda: 5px; }

E esta seria a mesma folha de estilo criada com Caneta:

fonte do corpo 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px

Onde estão as chaves? Onde vieram os pontos e vírgulas, os dois pontos? Esquecido, Estilete faz isso por nós.

Se você está começando com APF y HTML não é recomendado usar Estilete pelo simples fato de que você pode esquecer como as coisas realmente funcionam, mas se você já tem tempo neste mundo e quer economizar código e trabalhar ... vá em frente.

Programadores Python vai encontrar em Estilete algo muito semelhante ao que eles estão adaptados, já que você só precisa indentar corretamente para que a mágica seja feita.

instalação

Para Estilete trabalho que temos que instalar Node.js que está no ramo da Comunidade, então procedemos a fazê-lo:

$ sudo pacman -S nodejs

E depois instalamos o Stylus. A forma tradicional seria:

$ npm install -g stylus

Ele instala bem, mas não funciona para mim, por isso é muito mais fácil de instalar a partir do AUR:

$ yaourt -S nodejs-stylus

Como usar a Stylus

Ok, já instalamos Node.js e nós instalamos Estilete.. Como o usamos? É simples. Digamos que temos um diretório com os seguintes arquivos:

- dir - index.html - style.css

O que temos que fazer é criar o arquivo estilo.estilo, que é o que vamos trabalhar. Nesse arquivo, podemos ter algo como:

body background-color #ffff font-size 12px a.button color red padding 10px

Se salvarmos ou fizermos qualquer alteração, nada acontecerá, porque não estamos "compilando" nosso arquivo. Para compilá-lo, o que fazemos é abrir um terminal em nosso diretório (onde o arquivo estilo.estilo) e execute:

stylus -c style.styl

Mas toda vez que salvamos o arquivo estilo.estilo teríamos que executar o código, mas felizmente não é necessário, pois se executarmos o mesmo comando, mas adicionando o parâmetro -w (assista) acontece o seguinte:

stylus -c -w style.styl assistindo /usr/lib/node_modules/stylus/lib/functions/index.styl compilado style.css assistindo style.styl compilado style.css compilado style.css

Em outras palavras, o arquivo é compilado automaticamente. O resultado seria?

body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}

Como você pode ver, não só nosso código nos cria APF, mas elimina espaços desnecessários para que nossa folha de estilos pese menos 

Não só isso, Estilete Ele nos permite passar arquivos CSS em seu formato e a forma como podemos usar sua sintaxe é muito variada. E esta é apenas uma prévia. Então, eu encorajo você, se você estiver interessado, a saber um pouco mais sobre Estilete


Adicionar como fonte preferencial no Google