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

Question

我正在尝试将bootstrap.css 导入.less 文件，以便我可以有条件地应用带有媒体查询的引导样式。

这是我的 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 和 @screen 规则以及引用任何 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) "// ...can't find the source of the "@screen" at-rules:" 这些规则没有在 Bootstrap 的 LESS 文件中定义。文档中的代码说明了 Bootstrap 定义的网格的边界。它会告诉你如果你改变提到的变量会发生什么。

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

@media（最小宽度：@screen-sm）{ 宽度：@container-sm； }

另请阅读：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 // 编译错误" 没有名为 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);
}