CSS: Automatische Berechnung der Breitenvariable

Question

Hi @all!

Sagen wir, ich habe 2 Hilfsklassen wie:

.w3-4 { 
    width: calc((100%/4) * 3); 
} 

// AND 

.mr-10 { 
    margin-right: 10px; 
} 

Glauben Sie, dass es eine automatisierte reine CSS Weg ist, den Randwert von .mr-10 auf die Breite von .w3-4 zu subtrahieren?

Etwas wie

.mr-10 { 
    margin-right: 10px; 

    // width calc 
    width: calc(--width - 10px); 
} 

Es gibt viele Möglichkeiten, dies mit SASS oder sogar JS zu tun, aber ich bin nur ein bisschen faul und neugierig :)

Vielen Dank für Ihre Antworten,

A.

Answer 1

Sie --width Variable in allen Breitenklassen und manupulate Breite in Rand CSS erklären kann

div { 
 
    border: 1px solid; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
} 
 
.w3-4 { 
 
    width: calc((100%/4) * 3); 
 
    --width: calc((100%/4) * 3); 
 
} 
 
.w1-2 { 
 
    width: calc(100%/2); 
 
    --width: calc(100%/2); 
 
} 
 
.w1-4 { 
 
    width: calc(100%/4); 
 
    --width: calc(100%/4); 
 
} 
 

 

 
.mr-10 { 
 
    margin-right: 10px; 
 
    width: calc(var(--width) - 10px); 
 
}

<div class="w3-4"> 
 
width 3/4 
 
</div> 
 
<div class="w1-2"> 
 
width 1/2 
 
</div> 
 
<div class="w1-4"> 
 
width 1/4 
 
</div> 
 
<div class="w3-4 mr-10"> 
 
width 3/4 with 10px margin-right 
 
</div> 
 
<div class="w1-2 mr-10"> 
 
width 1/2 with 10px margin-right 
 
</div> 
 
<div class="w1-4 mr-10"> 
 
width 1/4 with 10px margin-right 
 
</div>

Answer 2

Ich glaube, Sie dies

wie tun kann

.mr-10 { 
    width: calc((100%/4) * 3 - 25px); 
} 

wo 25px Wert