twitter-bootstrap 包括@media 查询作为混合与 LESS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18563604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Including @media queries as mixins with LESS
提问by Dmitry Minkovsky
Mixins with LESS are really simple:
使用 LESS 的 Mixin 非常简单：
.some-rules() {
/* some rules */
}
.some-class {
.some-rules;
}
However, suppose I've got a ruleset within a media query, like:
但是，假设我在媒体查询中有一个规则集，例如：
@media (min-width: 800px) {
.my_ruleset {
/* more rules */
}
}
How can I include such a ruleset as a mixin?
如何将这样的规则集包含为 mixin？
My motivation here is that I am using Bootstrap. I am trying to avoid semantically polluting my markup with its selectors, and would rather incorporate its rulesets as mixins. That's simple enough given the first example above, but I'm not sure how to incorporate the @media selectors.
我的动机是我正在使用Bootstrap。我试图避免使用它的选择器在语义上污染我的标记，而是宁愿将其规则集合并为 mixin。考虑到上面的第一个示例，这很简单，但我不确定如何合并 @media 选择器。
EDIT
编辑
Specifically, here is a summary of the codeI am trying to useas a mixin:
具体而言，这里是代码的总结我试图使用作为一个mixin：
.container {
.container-fixed();
}
// ...
@media (min-width: @screen-sm) {
.container {
max-width: @container-sm;
}
// ...
}
@media (min-width: @screen-md) {
.container {
max-width: @container-md;
}
// ...
}
@media (min-width: @screen-lg-min) {
.container {
max-width: @container-lg;
}
// ...
}
回答by SaurabhLP
Just simply add:-
只需简单地添加：-
.my_ruleset {
/* more rules */
}
@media (min-width: 800px) {
.my_ruleset;
}
If you want to add parameters to this for instance then:-
例如，如果您想为此添加参数，则：-
.my_ruleset(@myMargin:5px;) {
margin:@myMargin;
}
@media (min-width: 800px) {
.my_ruleset(10px);
/* New Rules*/
}
.
.
/* And so On */
Update:-
更新：-
if you want to adapt this in a dynamic form take whole media query into mixin and play with it...
如果您想以动态形式调整它，请将整个媒体查询放入 mixin 并使用它...
.container(
@minSize:768px;
@maxSize:979px;
@myColor:green;
/* So on */
) {
@media (min-width: @minSize) and (max-width: @maxSize) {
.my_ruleset {
background-color:@myColor;
}
/* New Rules*/
}
}
.container(0px,480px,black);
.container(481px,767px,blue);
.container(768px,979px,pink);
.container(980px,1200px,white);
.container(1700px,2200px,red);
回答by AJ Meyghani
EDIT
编辑
Checkout these two answers (class set in media query, media query grouping), I feel like they are very closely related to your question. Looking at the second answer I tried to put something together. The snippet is below, but you can also see a demo.tar.gzI put together as well.
查看这两个答案（媒体查询中的类设置，媒体查询分组），我觉得它们与您的问题非常相关。看着第二个答案，我试图把一些东西放在一起。代码片段在下面，但您也可以看到我放在一起的demo.tar.gz。
main.less
主.少
@import "less/bootstrap"; /*Obviously, make sure to have all the less src :)*/
/*source: http://tinyurl.com/less-query */
.make-container(@min-width) {
@media (min-width: @min-width) {
.page-maker(@max-width) {
.page {
max-width: @max-width;
.container-fixed();
}
}
.make-page-style() when (@min-width=@screen-lg-min) {
.page-maker(@container-lg);
}
.make-page-style() when (@min-width=@screen-md) {
.page-maker(@container-md);
}
.make-page-style() when (@min-width=@screen-sm) {
.page-maker(@container-sm);
}
.make-page-style();
}
}
.make-container(@screen-sm);
.make-container(@screen-md);
.make-container(@screen-lg-min);
HTML
HTML
...
<body>
<div class="page">
...
</div>
...
OLD
老的
have you tried using the following mixins (n is the number of columns):
您是否尝试过使用以下 mixins（n 是列数）：
.make-row()
.make-lg-comun(n)
.make-md-column(n)
.make-xs-column(n)
These mixins are used to semantically structure the page. For example, if you have the following markup:
这些 mixin 用于在语义上构建页面。例如，如果您有以下标记：
<div class="main">
<div class="left">
</div>
<div class="right">
</div>
</div>
then in your less you can do:
那么在你的 less 你可以做：
.main{
.make-row();
}
.left{
.make-lg-column(5); /* makes five large desktop column */
}
.right{
.make-lg-column(7);
}
if this is not what you are looking for, perhaps elaborate on your intent more, maybe you won't need to do a lot of media queries.
如果这不是您要查找的内容，也许更详细地说明您的意图，也许您不需要进行大量媒体查询。
