Używanie miksów w bootstrap 3, aby uniknąć niejednoznacznego oznakowania struktury układu

Jestem relatywnie nowy zarówno na bootstrap, jak i na mniejszym i to jest testowe uruchomienie. Celem jest, aby wziąć klasy bootstrap i przekształcić je w proste i semantyczne klasy przy użyciu mniej. Ciągle otrzymuję komunikaty o błędach informujące, że .col-sm-12 i .col-md-8 są niezdefiniowane.

Jak rozwiązać ten problem.

    /*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;
        }
}

questionAnswers(3)

yourAnswerToTheQuestion