Como converter CSS antigo para menos
Cobrimos muito do básico para o LESS em nossos posts anteriores. Se você tem acompanhado nossa série LESS, acreditamos que, neste momento, você já tem uma boa idéia sobre como usar o Variáveis, Mixins e Operação em menos.
Também mencionamos como converter LESS em CSS regular, com um aplicativo ou com um compilador. Mas como fazemos o oposto? converter CSS em menos? Bem, esta dica é para você.
Usando uma ferramenta
Com crescente popularidade de Pré-processador CSS, algumas novas ferramentas e aplicativos que visam essencialmente facilitar a vida do web designer ou desenvolvedor, como essa ferramenta: CSS2Less.
Esta ferramenta nos permite converter CSS regular em menos. Então, vamos tentar. Eu tenho as seguintes regras CSS do meu antigo arquivo a ser convertido.
nav altura: 40px; largura: 100%; fundo: # 000; border-bottom: 2px solid #fff; nav ul preenchimento: 0; margem: 0 auto; nav li display: inline; flutuar: esquerda; nav a color: #fff; display: bloco inline; largura: 100px; text-shadow: 1px 1px 0px # 000; nav li a border-right: 1px sólido #fff; dimensionamento de caixa: caixa de borda; nav li: last-child a borda-direita: 0; nav a: hover, nav a: ativo background-color: #fff;
Aqui é o resultado.
nav a: hover, nav a: ativo background-color: #fff; nav altura: 40px; largura: 100%; fundo: # 000; border-bottom: 2px solid #fff; um color: #fff; display: bloco inline; largura: 100px; text-shadow: 1px 1px 0px # 000; ul preenchimento: 0; margem: 0 auto; li: último filho a border-right: 0; li display: inline; flutuar: esquerda; a border-right: 1px solid #fff; dimensionamento de caixa: caixa de borda;
Como podemos ver acima, nosso velho CSS agora está aninhado como no LESS.
Limitação
No entanto, também podemos ver algumas limitações nos resultados da conversão. No CSS antigo, temos várias cores iguais, como nessas duas declarações border-bottom: 2px solid #fff; e borda direita: 1px solid #fff; nós temos as duas fronteiras em branco. Em menos podemos realmente armazenar esse valor constante em um Variável.
Também não aninha e separa o pseudo-* com um símbolo "e" comercial (&), como nas regras a seguir li: último filho e nav a: hover, nav a: ativo. Eles apenas permanecem como estão, onde podemos simplificar os conjuntos de regras dessa maneira;
li &: primeiro filho a &: hover &: ativo
Conclusão
Apesar das limitações que ainda tem atualmente, essa ferramenta pode ser bastante útil para economizar tempo para aninhar conjuntos de regras de CSS. Nós só precisamos fazer o resto manualmente; possivelmente até as limitações acima são resolvido.
