Question

可能有不同的mixin取决于宽度？如何让它发挥作用？

e.g。

.fs (@weight: 300, @size: 2vw, @color: black) {
@size2: @size/10.2; 
font-family: 'Lato', sans-serif;
font-weight: @weight;
font-size: unit(@size2,vw);
color: @color;
}


@media screen and (min-width: 1024px){
.fs (@weight: 300, @size: 10px, @color: black) {

font-family: 'Lato', sans-serif;
font-weight: @weight;
font-size: unit(@size,px)!important;
color: @color;
}
}

谢谢

Answer 1

我希望px或vw单位取决于窗口宽度。如果窗口宽度小于1024px，则使用px单位。

不，在媒体查询中覆盖mixin实际上对您没有帮助（因为这样的覆盖仅影响相同的媒体查询块，并且对其中的任何mixin调用没有影响）。

实现所需内容的最简单方法实际上是将相应的@media查询放入 mixin本身：

// impl.:

.fs(@weight: 300, @size: 2, @color: black) {
    font-family: 'Lato', sans-serif;
    font-weight: @weight;
    color: @color;
    font-size: 1vw / 10.2 * @size;

    // this is obviously to be further abstracted 
    // (for example like in http://lesscss.org/features/#detached-rulesets-feature)
    @media screen and (min-width: 1024px) {
        font-size: 1px * @size;
    }
}

// usage:

div {
    .fs(400, 3);
}

span {
    .fs(700, 5);
}

还有其他方法（有些方法可能比上面更好，但这完全取决于你将如何使用.fs mixin）。

在媒体查询中使用较少的mixin

1 个答案: