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

Question

是否可以有不同的mixin取决于宽度？如何使它工作？

例如

.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);
}

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