LESS CSS: Início, Meio e Fim – Como utilizar?

Há alguns dias iniciei uma nova série aqui no site. Esta série tem o objetivo de apresentar as vantagens da adoção do framework LESS CSS nos projetos de aplicações web através da apresentação dos recursos disponíveis. O primeiro post da série pode ser encontrado AQUI. Se você está chegando agora para esta série, antes de prosseguir com a leitura deste texto recomendo fortemente a leitura do texto mencionado acima. Nele apresento, dentre outras características, a justificativa para o surgimento de um framework para auxiliar desenvolvedores na escrita de código CSS.

No artigo de hoje, discutiremos dois aspectos do framework alvo de nossos estudos – utilização no lado do cliente e utilização no lado do servidor.

Como posso implementar LESS em meu projeto?

Neste ponto você já deve estar ciente do seguinte fato: LESS é um framework terceiro e portanto, para que sua aplicação web possa usufruir de seus benefícios, um “compilador” deve ser incorporado ao servidor da aplicação. Assim, antes de referenciar a biblioteca Javascript na página cliente, realizaremos a instalação deste compilador LESS.

Nativamente, o compilador LESS foi escrito para ser executado em servidores web Node. Para que possamos utilizar LESS CSS em aplicações .NET precisaremos instalar este compilador específico para IIS (Internet Information Services). Outra opção seria configurar o suporte do IIS à aplicações Node.js. Para a construção dos exemplos desta série, utilizaremos a primeira opção.

LESS CSS para .NET

O componente que iremos utilizar para a construção de nossos códigos LESS na plataforma .NET é “DotLess”.

DotLess instala um gerenciador HTTP que gerencia o fluxo de execução. O código LESS é direcionado através do gerenciador HTTP para o compilador que, por sua vez o processa e devolve em CSS tradicional para renderização no browser. A Figura 1 apresenta o esquema funcional do processo LESS.

De forma geral, CSS é renderizado em tempo de compilação, entretanto, LESS oferece uma nova forma para realizar esta tarefa. Através de um arquivo Javascript simples, esta característica pode ser alterada e o render pode acontecer em tempo de execução. Este recurso é conhecido como “watch mode”.

Existe ainda uma segunda maneira de se construir códigos dinâmicos com CSS. O modelo ao qual nos referimos é conhecido como SASS (Syntactically Awesome StyleSheet) e trata da escrita através de linhas de comandos. O modelo adotado para a construção desta série será aquele mencionado nos parágrafos anteriores, isto é, LESS com DotLess.

Instalando DotLess

DotLess pode ser instalado de diversas formas. Para a construção deste post, criaremos um projeto do tipo ASP.NET MVC 3 e utilizaremos o gerenciador de pacotes do NuGet acoplado ao Visual Studio 2010. O acesso pode ser realizado via PowerShell (através do Package Manager Console) ou graficamente através do Manage NuGet Packages). Para fins didáticos, utilizaremos a segunda opção. O gerenciador está disponível no menu superior da ferramenta seguindo o seguinte caminho: Tools > Library Package Manager > Package Manager Console, conforme apresentado pela Figura 1.

Figura 1. Executando o gerenciador de pacotes do NuGet

Na janela que se apresenta, digitando no campo de busca a palavra “less” temos o resultado apresentado pela Figura 2. A opção selecionada indica o componente a ser instalado. Para executar o processo de instalação, basta clicar no botão “Install” e seguir as opções necessárias.

Figura 2. Painel de gerenciamento de pacotes do NuGet

Ao finalizar o processo de instalação, expandindo-se o diretório “References” na Solution Explorer do projeto, é possível visualizar a biblioteca “dotless.Core”, conforme ilustra a Figura 3.

Figura 3. Referência o componente “dotless”

Utilizando LESS CSS no projeto ASP.NET MVC

Agora que já possuímos a estrutura pronta para o trabalho com LESS, podemos ir ao código de fato e testar o funcionamento do framework. Um aspecto importante aqui é, LESS CSS é totalmente compatível com CSS, assim, se simplesmente alterarmos a extensão de um arquivo de “.css” para “.less”, os estilos devem ser mantidos em sua totalidade. Para demonstrar esta ideia, o que faremos a seguir é:

1. Adicionar um novo controller;
2. Adicionar uma nova view;
3. Estilizar a view com CSS tradicional;
4. Alterar a extensão do estilo de .css para .less
5. Testar o funcionamento

A Listagem 1 apresenta o código presente no controller “ExemploLESS1”.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DotLess.Controllers
{
public class ExemploLESS1Controller : Controller
{
public ActionResult Index()
{
ViewBag.Mensagem = "Olá! Este é um teste de LESS CSS!";
return View();
}

}
}

Listagem 1. Código básico do controller de exemplo

O código apresenta um controller que implementa uma action Index() que possui a função única de passar para a view através do elemento ViewBag a mensagem: “Olá! Este é um teste de LESS CSS!”. Como o foco aqui é testar o framework LESS, não estamos preocupados com quaisquer elementos orbitantes, ok?

O passo seguinte consiste na criação da view que responderá ao controller. O código apresentado pela Listagem 2 corresponde a estrutura da view.

<head>
<meta name="viewport" content="width=device-width" />
<title>LESS CSS - Exemplo 1</title>
</head>
<body>
<div>
<h1>@ViewBag.Mensagem</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam, sapien vel<br />
porttitor adipiscing, nisi dui faucibus ante, quis volutpat ligula massa at leo.<br />
Mauris purus odio, vestibulum sed congue vel, fringilla nec lacus. Sed dictum molestie<br />
velit, eu blandit dui laoreet in. Vestibulum ante ipsum primis in faucibus orci luctus<br />
et ultrices posuere cubilia Curae; Morbi fringilla mauris sed purus pretium sollicitudin.<br />
Sed rhoncus pretium malesuada. Nunc ipsum mauris, porta non interdum sit amet, dignissim<br />
nec erat.
</p>
</div>
</body>

Listagem 2. Código HTML/Razor da view

Seguindo a sequência de atividades, o que faremos a seguir é adicionar uma folha de estilos a nossa view. Assim, a Listagem 3 apresenta o código sugestivo em CSS tradicional.

body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #000;
background-color: #fff;
}

header,
footer,
nav,
section {
display: block;
}

/* Styles for basic forms
-----------------------------------------------------------*/

fieldset
{
border:1px solid #ddd;
padding:0 1.4em 1.4em 1.4em;
margin:0 0 1.5em 0;
}

legend
{
font-size:1.2em;
font-weight: bold;
}

textarea
{
min-height: 75px;
}

.editor-label
{
margin: 1em 0 0 0;
}

.editor-field
{
margin:0.5em 0 0 0;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
color: #ff0000;
}

.field-validation-valid
{
display: none;
}

.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}

.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}

.validation-summary-valid
{
display: none;
}

Listagem 3. O código CSS da página de exemplo

O passo seguinte consiste na adição do elemento CSS a página HTML. Este trecho de código pode ser visualizado na Listagem 4.

<link href="/Content/Site.css" rel="Stylesheet" type="text/css" />

Listagem 4. Adicionando a referência ao arquivo HTML

A Figura 4 apresenta o resultado obtido executando-se o projeto.

Figura 4. O projeto de teste em execução

Finalmente, o que temos como tarefa é: realizar o teste do código LESS. Assim, o que faremos como primeiro passo é, alterar o formato de arquivo de “.css” para “.less” e realizar o teste. A Listagem 5 apresenta o novo cabeçalho de incorporação do estilo e a Figura 5 a alteração do formato do arquivo.

<link href="/Content/Site.less" rel="Stylesheet" type="text/css" />

Listagem 5. Incorporando o arquivo LESS

Figura 5. Arquivo de estilos no formato LESS

Finalmente, nos resta verificar se o estilo dos elementos apresentados pela Listagem 2 (da view) se mantém inalterados. A Figura 6 apresenta o resultado final.

Figura 6. O resultado com LESS em execução

Alguns links

1. Less CSS Extension: http://visualstudiogallery.msdn.microsoft.com/e646c6ec-87a7-45ea-81e8-d655a3d3e73e
   Ferramenta criada para auxiliar na escrita de código LESS.
2. CSS Is Less: http://visualstudiogallery.msdn.microsoft.com/dd5635b0-3c70-484f-abcb-cbdcabaa9923
   Extensão criada para auxiliar desenvolvedores no processo de escrita de código LESS.
3. DotLess: http://www.dotlesscss.org/
   Site oficial do projeto DotLess que permite o trabalho com LESS CSS na plataforma .NET.

Legal não?!

Por hoje é só. Abraço e até o próximo post.