Resolvi aprender a escrever CSS utilizando o SASS (Syntactically Awesome Stylesheets), como o próprio nome diz “Estilos Sintaticamente Impressionantes” e é impressionante mesmo, depois que você começa a utilizar, tenho certeza que nunca mais vai querer escrever estilos “na unha”, se é que se pode dizer assim.

Eu utilizo no momento, o Netbeans para desenvolver, e então precisava instalar o SASS nele. Comecei a ver tutoriais na internet para fazê-lo, só que me deparei com o primeiro problema, o Netbeans não tem o Ruby nativo, pelo menos até o momento, e para que o SASS funcionasse nele, era preciso primeiramente instalar o Ruby.

Pois bem, então vamos ver como instala o Ruby. No próprio site do SASS, existe esse link e um tutorial para instar o RubyInstaller em máquina Windows. Siga instalando o Ruby normalmente, com 2 cliques no arquivo baixado.

Quando fui instalar o SASS, como descrito no tutorial do site do SASS, parecia ser “mamão com açúcar”, mas de cara me retornou o seguinte erro abaixo, dizendo que não poderia ser instalado por causa do certificado:

SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed

Como assim, problema de certificado? Tenho em minha máquina certificado SSL instalado e funcionando corretamente, o Ruby foi instalado sem nenhum erro, porque não instala o SASS?

Lá vamos nós novamente procurar na internet o porquê disso, e encontrei vários programadores com o mesmo problema, além de vários métodos que eles explicavam e que não deram certo.

Esse erro não tem nada a ver com a máquina local como imaginei no princípio, e sim uma mudança na infraestrutura no site rubygems.org que agora fazem uso do SSL mais eficiente. Para aqueles que não estão familiarizados com SSL e os certificados, há muitas partes que compõem porção segura de conteúdo possível.

Os certificados SSL são usados ​​no site, que são obtidos a partir de uma autoridade de certificação (CA) e gerados a partir de uma chave privada, juntamente com a respectiva assinatura. Normalmente e até poucos meses atrás, assinaturas de chave privada usava SHA-1 como forma de fornecer um resumo (ou checksum) da chave privada sem distribuir a chave em si (lembre-se, deve manter-se privada).

SHA-1 foi encontrado fraco e muitos servidores e sites foram atualizar em relação à SHA-2 (especificamente SHA256 ou superior), a fim de preparar para os navegadores para as mudanças.

Problema específico com Rubygems

No caso particular da Rubygems (a ferramenta de linha de comando) é que ele requer para agrupar dentro de seu código os certificados de confiança, que permitem Rubygems estabelecer uma conexão com os servidores, mesmo quando o sistema operacional de base é incapaz de verificar a identidade deles.

Até alguns meses atrás, este certificado foi fornecida por uma CA, mas recentemente o certificado é fornecido por uma CA diferente. Devido a isso, as instalações existentes do Rubygems teriam que ser atualizado antes da troca do certificado e dar tempo suficiente para que a alteração se espalhasse (e as pessoas pudessem atualizar).

Como o que normalmente acontece com o software, as coisas podem ficar fora de sincronia em coordenar esse esforço, ao tamanho e uso de rubygems.org é quase impossível. O problema é que apenas Rubygems 2.4.4 foi lançado, deixando a instalação de Ruby com 1.8, 2.0 e 2.2 em um estado quebrado. Especialmente desde Rubygems 2.4 está quebrado no Windows.

E isso para quem trabalha com desenvolvimento sabe que é complicado e que isso poderia acontecer a qualquer um. Liberar várias versões de qualquer software em um curto espaço de tempo e ser muito sensível ao tempo é altamente complicado!

Mesmo que eles tenham lançamentos oficiais de qualquer uma das versões que corrigem o problema, não será possível instala-los via Rubygems (problema da galinha do ovo descrito antes).

Mas para resolver isso podemos fazer o seguinte, lembrando que este procedimento é para Windows:

Depois de instalado o Ruby, na linha de comando do WINDOWS. Se ainda não sabe como fazer, basta apertar a BANDEIRA WINDOWS + R e escrever CMD na caixa que irá se abrir:

Após esse comando, irá abrir a famosa tela DOS, que era utilizada o tempo todo nos primórdios da computação. Pois bem, agora precisamos chegar à raiz que foi instalado o Ruby e, para isso digite o comando a seguir:

Após esse comando, podemos identificar qual pasta que foi criada na instalação do Ruby, para isso digite o comando a seguir:

Com esse comando podemos ver uma listagem de todos os diretórios na raiz, e precisamos encontrar uma pasta escrita Rubyxx, onde xx representa a versão que está sendo/foi instalada.

Se fizer tudo certinho, agora o início do prompt de comando, como é conhecido, ficará parecido com isso “C:\Rubyxx>”. Agora faça o comando a seguir para iniciar a atualização e instalação do Rubygems:

C:\Ruby21>gem sources -a http://rubygems.org/ (aperte enter)

https://rubygems.org is recommended for security over http://rubygems.org/

Do you want to add this insecure source? [yn]  y

http://rubygems.org/ added to sources

Após a atualização e instalação acima, podemos enfim instalar o SASS, e para isso basta digitar o comando a seguir:

C:\Ruby21>gem install sass (aperte enter)

Fetching: sass-3.4.12.gem (100%)

Successfully installed sass-3.4.12

Parsing documentation for sass-3.4.12

Installing ri documentation for sass-3.4.12

Done installing documentation for sass after 6 seconds

WARNING:  Unable to pull data from 'https://rubygems.org/': SSL_connect returned

=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (htt

ps://api.rubygems.org/latest_specs.4.8.gz)

1 gem installed

E para ter certeza se realmente foi instado e qual sua versão, digite o comando a seguir:

C:\Ruby21>sass -v

Sass 3.4.12 (Selective Steve)

Se tudo correu bem, irá aparecer a versão do SASS que foi instalado com sucesso!

Neste próximo artigo, iremos ver como instalar o SASS no Netbeans e começar a utilizar, escrever e se divertir com um pré-processador potente, onde podemos utilizar recursos que não existem em CSS ainda como variáveis, aninhamento, mixins, herança e outras guloseimas bacanas CSS que fazem escrita divertida novamente.