Как использовать стили Bootstrap в файле LESS?

Question

Я пытаюсь импортировать bootstrap.css в файл .less, так что я могу условно применять стили Bootstrap с медиа-запросами.

Вот мой МЕНЬШЕ код:

// Visual Studio is saying "Couldn't locate" the file for both, yet they are there: 
@import url("bootstrap.min.css"); 
@import url("bootstrap-theme.min.css"); 

// ...can't find the source of the "@screen" at-rules: 
@extra-small: ~"screen and (max-width: @screen-xs-max)"; 
@small:  ~"screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max)"; 
@medium:  ~"screen and (min-width: @screen-md-min) and (max-width: @screen-md-max)"; 
@large:  ~"screen and (min-width: @screen-lg-min)"; 

footer { 
    text-align: center; 

    // ...doesn't like the comma "or" syntax here, so "or" is used instead: 
    @media @extra-small or @small { 
     #linkedin-flair { 
      .hide // compile error 
     } 
     #stackoverflow-flair { 
      .hide // compile error 
     } 
    } 

    @media @medium { 
     #linkedin-flair { 
      .col-sm-3 // compile error 
     } 
     #copyright-text { 
      .col-sm-6 // compile error 
     } 
     #stackoverflow-flair { 
      .col-sm-3 // compile error 
     } 
    } 

    @media @large { 
     #linkedin-flair { 
      .col-sm-4 // compile error 
     } 
     #copyright-text { 
      .col-sm-4 // compile error 
     } 
     #stackoverflow-flair { 
      .col-sm-4 // compile error 
     } 
    } 
} 

... тем меньше возникают проблемы с @import и @screen на-правил, а также с привязкой любых классов Bootstrap, таких как .hide.

Я использую Visual Studio 2013, Web Essentials, 2013 и Bootstrap 3.

Answer 1

1) Вы должны предпочесть, чтобы загрузить файлы LESS Bootstrap и импортировать их с @import "bootstrap.less". Если вы не можете использовать ссылки @ seven-phase-max и использовать @import (less) bootstrap.min.css

2) «// ... не удается найти источник правил« @screen »at-rules:« эти правила не определены в файлах LESS Bootstrap. Код из документов иллюстрирует границы сетки, определенные Bootstrap. Он покажет вам, что произойдет, если вы измените упомянутые переменные.

Например взглянуть на grid.less, который определяет:

@media (мин-ширина: @ экрана см) { ширина: @ контейнер-см; }

Также читайте: http://blog.scur.pl/2012/06/variable-media-queries-less-css/ и LESS variables in @media queries я не думаю, что решение не будет работать причину:

@screen-lg: 992px; 
@large: ~"screen and (min-width: @screen-lg)"; 
@media @large{ color: red; } 

компилирует:

@media screen and (min-width: @screen-lg) { 
    color: red; 
} 

NB @screen-lg не установлен.

3) «.hide // ошибки компиляция» там нет Примеси называется шкура Вы можете использовать Примеси из отзывчивого-utilities.less (см также: http://getbootstrap.com/css/#responsive-utilities)

В вашем случае вы получите что-то вроде:

//example DO NOT compile to useful CSS 
@import (reference) "bootstrap.less"; 
#linkedin-flair 
{ 
&:extend(.hidden-xs); 
&:extend(.hidden-sm); 
} 

4) ".col-см-4 // ошибка компиляции" .col-см-4 является динамической генерации (grid.less) вы не можете использовать его как примесь.

использование:

#stackoverflow-flair { 
.make-sm-column(4); 
}