如何在 LESS 文件中使用 Bootstrap 样式？

Question

我正在尝试导入bootstrap.css到.less文件中，以便我可以有条件地通过媒体查询应用 Bootstrap 样式。

这是我的 LESS 代码：

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

...LESS 在使用@import和@screenat 规则以及引用任何 Bootstrap 类（例如.hide.

我正在使用 Visual Studio 2013、Web Essentials 2013 和 Bootstrap 3。

Answer 1

1）您应该更喜欢下载 Bootstrap 的 LESS 文件并使用@import "bootstrap.less". 如果您无法关注 @seven-phases-max 的链接并使用@import (less) bootstrap.min.css

2) “// ...无法找到“@screen”at-rules 的来源：”这些规则未在 Bootstrap 的 LESS 文件中定义。文档中的代码说明了 Bootstrap 定义的网格的边界。它将向您展示如果更改提到的变量会发生什么。

例如，看一下 grid.less ，它定义了：

@media (最小宽度: @screen-sm) { 宽度: @container-sm; }

另请阅读： http: //blog.scur.pl/2012/06/variable-media-queries-less-css/和@media 查询中的 LESS 变量我不认为你的解决方案不起作用，因为：

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

编译为：

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

注意@screen-lg未设置。

3）“ .hide //编译错误”没有名为 hide 的 mixins 您可以使用responsive-utilities.less中的mixins（另请参阅：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-sm-4 // 编译错误" .col-sm-4 是动态生成的 (grid.less) 你不能将它用作 mixin。

使用：

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