这是我第一次使用 LESS,我正在尝试让一些元素根据媒体查询进行缩放。
所以我想我会做一个 .scale
混合来为我做这件事。
.scale(@rules) {
@scale-ratio: 1;
@media screen and (min-width: (@page-width)) { @rules(); }
@scale-ratio: 0.8;
@media screen and (min-width: (@page-width * 0.6), max-width(@page-width - 1)) { @rules(); }
@scale-ratio: 0.6;
@media screen and (max-width: (@page-width * 0.6 - 1)) { @rules(); }
}
// Using like
header {
.scale({
width: @page-width * @scale-ratio;
});
}
有什么办法可以让它发挥作用吗?还是通过其他方法?我只是不想退回到必须为每个媒体查询编写属性。
请求预期输出:
@media screen and (min-width: 1280px) {
header {
width: 1280px;
}
}
@media screen and (min-width: 768px, max-width: 1279px) {
header {
width: 1024px;
}
}
@media screen and (max-width: 767px) {
header {
width: 768px;
}
}
有了这个输入,这是预期的输出,但这只是一个剥离的例子。
最佳答案
变量的范围仅限于 block (它们表现得像常量,顺序不影响它们)。限制范围以便重新定义变量的一种方法是在 &{}
block 中声明它们。
下面的 mixin 生成您期望的 CSS:
.scale(@rules) {
&{
@scale-ratio: 1;
@media screen and (min-width: (@page-width)) { @rules(); }
}
&{
@scale-ratio: 0.8;
@min-width: (@page-width * 0.6);
@max-width: (@page-width - 1);
@media screen and (min-width: (@min-width), ~'max-width: @{max-width}') { @rules(); }
}
&{
@scale-ratio: 0.6;
@media screen and (max-width: (@page-width * 0.6 - 1)) { @rules(); }
}
}
我不得不将 max-width
部分放在撇号内,因为它会导致错误(我真的不知道为什么)。
使用:
@page-width: 1280px;
结果是:
@media screen and (min-width: 1280px) {
header {
width: 1280px;
}
}
@media screen and (min-width: 768px, max-width: 1279px) {
header {
width: 1024px;
}
}
@media screen and (max-width: 767px) {
header {
width: 768px;
}
}
关于css - 在规则集中使用来自 mixin 的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23251514/