Usando mixins no bootstrap 3 para evitar marcação não-semântica para a estrutura do layout
Eu sou relativamente novo tanto para bootstrap quanto para menos e isso é um teste. O objetivo é pegar as classes de bootstrap e transformá-las em classes simples e semânticas usando menos. Continuo recebendo mensagens de erro dizendo que .col-sm-12 e .col-md-8 são indefinidos.
Como resolvo esse problema?
/*less styles file*/
@import "bootstrap.min.css";
@boom: #ea7000;
@screen-sm: ~"(min-width:768px)";
@screen-md: ~"(min-width:992px)";
@screen-lg: ~"(min-width:1200px)";
.tim {
height: 200px;
@media screen, @screen-sm {
background-color: black;
.col-sm-12;
}
@media screen, @screen-md{
background-color: @boom;
.col-md-8;
}
}