0

幅に応じて異なる 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;
}
}

ありがとうございました

4

1 に答える 1

1

pxまたはvwユニットがウィンドウの幅に依存するようにしたい。ウィンドウ幅がそれより小さい場合は、1024pxpx 単位を使用します。

いいえ、メディア クエリ内で 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 をどのように正確に使用するかによって異なります)。

于 2015-08-12T12:24:56.597 に答える