Como trabalhar com Modernizr e Less juntos

Olá pessoal. Neste protocolo, presumo que a maioria de vocês já usou ou experimentou com Modernizr e Less (biblioteca CSS).

Um dos recursos que o less oferece são os estilos aninhados. É legal e torna seu CSS mais legível e com uma estrutura melhor. Mas há um problema ao trabalhar com classes CSS da Modernizr que são encontradas na tag HTML.

Digamos que temos este HTML e CSS, como neste exemplo:

HTML

<div class="box">    

</div>

CSS

.box{
  width:200px;
  height:200px;
  box-shadow:0 0 5px 5px #888;
}

Quando se trata de trabalhar com a Modernizr, você tem um pequeno conflito. Se você quiser adicionar tratamento, por exemplo, a navegadores que não suportam box-shadow, como o IE8, preciso ter um estilo de contorno em vez de usar box-shadow não suportado (usando a classe Modernizr).

CSS

.no-boxshadow{      
     .box{outline:solid 2px #888;}      
}

Ambos os pais de estilos CSS estão conectados, mas são escritos separadamente – veja o exemplo:

  .box{
    width:200px;
    height:200px;
    box-shadow:0 0 5px 5px #888;
  }


.no-boxshadow{      
     .box{outline:solid 2px #888;}      
}

A solução

A solução é bastante simples. Podemos adicionar uma classe pai de Modernizr aninhada dentro da classe .box e desta forma nossos grupos têm conexão, usando o recurso & less no final da propriedade.

Eu preciso adicionar à minha caixa de classe apenas este estilo

.no-boxshadow &{
  outline:solid 2px #888;
}

Solução Completa

O novo estilo completo ficará assim:

.box{
  width:200px;
  height:200px;
  box-shadow:0 0 5px 5px #888;

   /*Check if HTML parent has class .no-boxshadow 
      - if true add this styles*/

  .no-boxshadow &{
    outline:solid 2px #888;
  }

}

Agora, menos código é muito mais legível e não exige a escrita da mesma classe duplicada e separada.

Só isso, espero que gostem.

Se você gostou deste post, ficarei feliz em receber seu UPVOTE. Você está convidado a me seguir ou a minha equipe @Walla! P&D e endosso minhas habilidades.

Elad Shechter.