css Variable

[Bennyaa]

Hallo, habe ich in css eine möglichkeit eine Variable mit zu nutzen?

Bspw. wenn ich ein objekt um x em verschieben möchte, dann will ich, dass sich ein anderes genauso verschiebet.

dachte da an sowas wie:

#Object1
{
    position: absolute;
    top: Var1 + em5;
}

#Object2
{
    position: absolute;
    top: Var1;
}

 

[Bagbag]

Dein Thementitel 1:1 in Google eingeben ergibt folgende 2 Ergebnisse an erster Stelle, die deine Frage beantworten:

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://www.w3schools.com/css/css3_variables.asp

 

[tollertyp]

Oder halt auf Dinge wie SASS, LESS oder wie sie alle heißen, setzen.

 

[Bennyaa]

Dein Thementitel 1:1 in Google eingeben ergibt folgende 2 Ergebnisse an erster Stelle, die deine Frage beantworten:

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://www.w3schools.com/css/css3_variables.asp

hier muss man dann die weiteren werte also die oben genannten 5em über padding machen?
Weil hinter die var(--myvar) kann man nichts mehr schreiben.

 

[FranzvonAssisi]

Weil hinter die var(--myvar) kann man nichts mehr schreiben.

Doch. Rechnen geht in CSS aber nur mit ‘calc(100% - 3px)’ (als Beispiel, Google ist dein Freund)

Lg

 

[Bagbag]

Nein, in einer CSS Variable steht einfach ein beliebiger Wert drin, durch das var() ersetzt wird. Damit kannst du nun fast alles machen, was du in CSS auch mit Literalen machen kannst. Zum Beispiel in calc() nutzen.

:root {
    --my-padding: 50px;
}

my-element {
    top: calc(var(--my-padding) + 2em);
}

 

[tollertyp]

Was ich mich gerade frage ist, ob der TE dann diese Variable via JS ändern können möchte. Aber ich denke nicht :-)
Sonst wäre ja die Rechnung jetzt schon im JS.

 

[Bennyaa]

Was ich mich gerade frage ist, ob der TE dann diese Variable via JS ändern können möchte. Aber ich denke nicht :-)
Sonst wäre ja die Rechnung jetzt schon im JS.

Wäre auch nicht schlecht.
Nehme mal an, das dann wohl geht?
Wollte gerade nur auf die Schnelle jeden Objekt einer Gruppe einen Grundoffset verpassen und somit generell alles verschieben.
Oder sollte man sowas mit divs zusammenfassen?

 

[floq0r]

Oder sollte man sowas mit divs zusammenfassen?

Oder einfach mit einer CSS Klasse

 

[Bagbag]

Wenn du mehrere Elemente die zusammengehören verschieben willst, dann macht man das i.d.R. über einen Container, ja. Ansonsten was @floq0r sagt.

 

[tollertyp]

Und wie funktioniert das mit einer CSS-Klasse und dem Verschieben ("Grundoffset")? Also das heißt, alle Elemente selbst haben unterschiedliche Positionen, und man möchte sie nun über eine CSS-Klasse z.B. um 20 Pixel nach unten verschieben?

Siehe dazu den Beispiel-CSS-Code oben.

Insofern: Idealerweise alles zusammenfassen, was auch zusammengehört.

 

[Bennyaa]

Oder einfach mit einer CSS Klasse

Ah OK, ja auch cool. Gefällt mir .
Allerdings wenn ich eine Klasse verschiebe und keinen container habe, dann beziehe ich mich ja bei den einzelnen Objekten immer auf das übergeordnerte objekt, oder? Oder bezieht sich ein objekt dann auf die klasse?
So wie bei einem container?
Wenn nicht, könnte das ja zu problemen beim verkleinern der seite führen, oder?

Was ist denn nun Besser? Verschiebungen mit "em", oder mit "%"?

 

[tollertyp]

Es kommt auf die Art der Positionierung an, auf was du dich beziehst.

Und ob das Verschieben mit der Klasse wie gewünscht funktioniert, wenn diese unterschiedliche Werte haben sollen für z.B. topp, das muss mir erst noch jemand beweisen.