Rechnen mit calc() – Wieso keine Bezugswerte möglich?

[Mörf]

Hallo,
ich hatte die Tage etwas näher mit der calc()-Funktion in CSS zu tun gehabt und muss sagen, dass ich die grundlegende Idee wirklich praktisch finde.
Allerdings stellt sich mir unmittelbar die Frage, ob man die Umsetzung nicht besser hätte machen können. Insbesondere bei den möglichen Parametern würde ich mir die Möglichkeit wünschen, auf andere Werte Bezug nehmen zu können. Ich meine, wäre es nicht unheimlich praktisch, wenn man sowas definieren könnte wie:
.element { height: calc(width); }
Für ein Blockelement, dass stets quadratisch sein soll?
Oder etwas in der Art:
.element { width: calc(border-width * 50); }
oder äquivalent:
.element { border-width: calc(width / 50); }

Noch viel flexibler würde es dann natürlich werden, wenn man nicht nur die Werte des betreffenden Elements selbst heranziehen könnte, sondern auch andere Elemente auf der Seite. Ich denke an etwas wie:
#linke_spalte { width: calc(100% - width(#rechte_spalte)); }

Könnte natürlich zu Problemen führen, wenn zwei Werte sich gegenseitig als Berechnungsreferenz heranziehen, aber da ließe sich sicher auch eine definierte Lösung finden.

Was ich sagen will: Bin ich der einzige, der diese Möglichkeiten nützlich finden würde?
Wie kommt es, dass die zuständigen Gremien eine derartige Möglichkeit nicht vorsehen?

[Gunnar Bittersmann]

@@Mörf:

nuqneH

Was ich sagen will: Bin ich der einzige, der diese Möglichkeiten nützlich finden würde?

Nein. Die Entwickler von CSS-Präprozessoren wie Sass fanden das auch. Auch deren Anwender finden das. Du gehörst noch nicht dazu?

Wie kommt es, dass die zuständigen Gremien eine derartige Möglichkeit nicht vorsehen?

Tun sie doch.

Qapla'

[Mörf]

Wie kommt es, dass die zuständigen Gremien eine derartige Möglichkeit nicht vorsehen?

Tun sie doch.

Also eventuell stehe ich auf dem Schlauch, aber ich sehe nicht, wie die auf der von dir verlinkten Seite angegebenen CSS-Variablen, mit dem zu tun haben, was ich beschrieb.
Die beschriebene var()-Funktion bezieht sich doch nur auf vorher definierte Variablen, deren Definition mit var-* eingeleitet wird.
Ich lese jedenfalls auf der Seite nirgends heraus, dass man damit auch auf "reguläre" Werte wie eben width, height, border-width und dergleichen zugreifen können dürfte.

[bubble]

Ich lese jedenfalls auf der Seite nirgends heraus, dass man damit auch auf "reguläre" Werte wie eben width, height, border-width und dergleichen zugreifen können dürfte.

Also ich mach das meist so, dass ich Werte wie width, height und border-width (und Farben, etc) in Variablen stopfe, in einer init.scss (in der deklariere ich dann auch Mixins und der gleichen) und in den SCSS-Dateien in denen sich dann die eigentlichen Style-Regeln befinden benutze ich nur noch die Variablen und Funktionen.

Dann ergibt sich der Rest eigentlich von selbst.

MfG
bubble

[Auge]

Hallo

Tun sie doch.

Also eventuell stehe ich auf dem Schlauch, aber ich sehe nicht, wie die auf der von dir verlinkten Seite angegebenen CSS-Variablen, mit dem zu tun haben, was ich beschrieb.
Die beschriebene var()-Funktion bezieht sich doch nur auf vorher definierte Variablen, deren Definition mit var-* eingeleitet wird.
Ich lese jedenfalls auf der Seite nirgends heraus, dass man damit auch auf "reguläre" Werte wie eben width, height, border-width und dergleichen zugreifen können dürfte.

Wenn ich das richtig verstehe, funktioniert folgendes:

:root {  
var-main-width: 46em;  
var-aside-width: 14em;  
}  
  
html {  
width: 100%;  
min-height: 100%;  
margin: 0;  
padding: 0;  
}  
  
body {  
margin: 1em auto;  
width: calc(var(main-width) + var(aside-width));  
}

Tschö, Auge