it-swarm.com.de

Weniger CSS-Variablen in der Medienabfrage gesetzt?

Ich arbeite an einer iPad-spezifischen Website. Damit meine Website sowohl auf dem Retina-Display-iPad als auch auf älteren Versionen von iPads funktioniert, möchte ich eine Variable in WENIGER CSS in der Medienabfrage festlegen: 

@media all and (max-width: 768px) {
    @ratio: 1;
}

@media all and (min-width: 769px) {
    @ratio: 2;  
}

Wenn Sie also etwas in Pixel einstellen, können Sie dies tun

width: 100px * @ratio;

Ich habe jedoch einen Kompilierungsfehler erhalten, der besagt, dass @ratio nicht definiert ist. Ist es möglich, eine Problemumgehung zu haben, damit es funktioniert? Vielen Dank.

43
Sean

Es wäre schön, aber das ist unmöglich so zu machen.

WENIGER kompiliert Ihre Medienabfragen zu tatsächlichen Medienabfragen. Daher gibt es zur Kompilierzeit keine Hinweise darauf, welche Medienabfrage für den Browser relevant ist.

Nach der Kompilierzeit haben Sie nur noch nicht weniger CSS, so dass Sie keine Variablen mehr haben können.

Sie können dies stattdessen tun, aber es ist nicht so elegant:

@base_width: 100px;

@media all and (max-width: 768px) {
    .something {
        width: @base_width;
    }
}

@media all and (min-width: 769px) {
    .something {
        width: @base_width * 2;
    }
}
43
Paulpro

Ich weiß, dass ich mit meiner Antwort zu spät komme, aber jemand kann dies nützlich finden.

Sie können Ihre Stile in eine separate Datei verschieben

// styles.less
.foo {
  width: 100px * @ratio;
}

Importieren Sie die Datei anschließend mehrmals, nachdem Sie die Werte der Variablen geändert haben

// main.less
@ratio: 1; // initial value

@media all and (max-width: 768px) {
  @ratio: 1;
  @import (multiple) "styles";
}

@media all and (min-width: 769px) {
  @ratio: 2;
  @import (multiple) "styles";
}

Beachten Sie, dass (mehrere) hier wichtig ist

Der kompilierte Code wird so aussehen

// main.css
@media all and (max-width: 768px) {
  .foo {
    width: 100px;
  }
}
@media all and (min-width: 769px) {
  .foo {
    width: 200px;
  }
}
10

Das ist ein bisschen hackig, aber eine mögliche Lösung besteht darin, die Schriftgröße für ein Wrapper-Element und alle Einheiten auf em zu setzen:

HTML:

<div id="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

WENIGER:

#wrap 
    {
    font-size: 100px;
    width: 10em; // = 1000px;
    @media all and (max-width: 768px)
        {
        font-size: 60px;
        }
    .child1
        {
        width: 5em; // 500px normally, 300px on small screens
        }
    .child1
        {
        width: 2.5em; // 250px normally, 150px on small screens
        }
    }

Das funktioniert natürlich nicht, wenn Sie Elemente haben, die Text und untergeordnete Elemente enthalten.

1
Manuel Ebert

Für diejenigen, die möglicherweise nur die Unterstützung relativ moderner Browser zulassen (Chrome 49+, FF 31+, kein IE), können Sie stattdessen css-Variablen verwenden.

Hier ist Browser-Supporttabelle von "Kann ich verwenden".

html {
    --width-var: 300px;

    @media only screen and (max-width: 750px) {
        --width-var: 200px;
   }
}

.your-class {
    max-width: calc( var(--width-var) * 2 );
    .... // tons of other props
}

Mit dem obigen Code wird die max-width-Eigenschaft von .your-class neu berechnet (da --width-var geändert wird), wenn der Bildschirm kleiner als 750px wird. Wenn die Größe des Bildschirms geändert wird, wird die css-Variable wieder auf ihren ursprünglichen Wert gesetzt.

1

WENIGER kann dies derzeit nicht tun, obwohl dies technisch möglich wäre. Diese Funktion wurde in der GitHub-Ausgabe mit dem Titel Weniger Variablen in Medienabfragen angefordert.

Siehe auch diese Frage: CSS-Preprozessor mit der Möglichkeit, Variablen in einer @media-Abfrage zu definieren

1
Flimm

Ich hatte eine WENIGER Variable, die ich überall verwendete, auch in Berechnungen. Für mich musste die Variable flexibel sein und sich hinsichtlich der Bildschirmbreite ändern, oder alle Berechnungen mussten dupliziert werden und entweder eine andere Variable verwenden oder eine andere Berechnung durchführen.

Dies ist, was ich getan habe, und jetzt funktioniert dieselbe Variable ordnungsgemäß, wo immer sie verwendet wird.

Es setzt die Variable in CSS und ändert sie, wenn Javascript eine bedingte Klasse hinzufügt. Die Variable LESS ruft die CSS-Variable auf.

IE 11 unterstützt nicht, seien Sie also vorsichtig.

/* CSS var sets the width for normal screen size */
:root {
  --side-nav-width: 252px;
}

/* change the CSS var under conditions
   I think it would work in a media query but didn't test */
.side-nav-closed {
  --side-nav-width: 72px;
}


/* The LESS var correctly invokes whichever width applies */
@side-nav-width: var(--side-nav-width);
0
Deborah

Ich fand, dass die akzeptierte Lösung nicht funktionierte, da sich der Compiler beschweren würde, dass das Mixin nicht definiert wurde. Eine alternative Lösung:

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 2;
    }
}
0
Rijk