calculaties berekenen calc() CSS optellen aftrekken delen

calculaties en berekeningen maken met calc()

Alle CSS Preprocessors hebben wiskunde functies en ze zijn behoorlijk nuttig. Maar ze zijn niet zo krachtig als native wiskunde. De meest nuttige eigenschap van calc() is de mogelijkheid om eenheden te mixen, zoals percentages en pixels. Geen enkele Preprocessor zal dat ooit kunnen. Het is iets dat moet gebeuren tijdens het renderen.

Met CSS optellen aftrekken vermenigvuldigen delen

calc() is een native CSS manier om eenvoudige wiskunde direct in CSS te doen als vervanging voor elke lengte-waarde (of zowat elke getalwaarde). Het heeft vier eenvoudige wiskunde operatoren:

  • optellen (+)
  • aftrekken (-)
  • vermenigvuldigen (*)
  • delen (/)

 

Voorbeelden calculaties en berekeningen maken met calc()

Aantal pixels van rechter onderhoek berekenen

We kunnen achtergrond-afbeelding gemakkelijk X pixels van de linkerbovenhoek plaatsen.


background-image: url(hond.png);
background-position: 50px 20px;

Dat zou de hond 50px van links en 20px van boven in het elementenvak zetten. Maar wat als je hem 50px van rechts en 20px van onder wilt hebben? Niet mogelijk met alleen rechte lengte waarden. Maar calc() maakt het mogelijk!


background-image: url(hond.png);
background-position: calc(100% - 50px) calc(100% - 20px);

Kolombreedte berekenen

Kolombreedte berekenen doe je zo heel nauwkeurig:


.column-1-7 {
width: calc(100% / 7);
}
.column-2-7 {
width: calc(100% / 7 * 2);
}
.column-3-7 {
width: calc(100% / 7 * 3);
}


Links en inspiratie voor berekeningen maken:

https://developer.mozilla.org/en-US/docs/Web/CSS/calc()

https://css-tricks.com/a-couple-of-use-cases-for-calc/