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和@screen at-rules方面遇到问题，并且引用了任何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（min-width：@ screen-sm）{ width：@ 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);
}

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

1 个答案: