Utilitatea functiei CSS calc()

Calc() este o functie CSS care permite sa calculezi valori direct in CSS. Una dintre cele mai utile caracteristici ale acestei functii este ca putem efectua calcule intre unitati CSS exprimate diferit. Pentru exemplificare noi am folosit o scadere intre procedente si pixeli, dar la fel de bine am fi putut alege oricare alt CSS unit: em, pt, rem, etc.

.main-content {

  width: calc(100% – 40px);

}

Functia se aplica atat pentru scaderi, cat si pentru alte operatii precum adunari (+), inmultiri (*) sau impartiri (/). Singura conditie pentru a functiona corespunzator, este ca operatorul sa fie precedat si succedat de spatii. Conform caniuse.com, functia calc() este compatibila cu principalele browsere folosite la acest moment.

// use this code

.logo {

  height: calc(4rem – 30px);

}

// instead of this one

.logo {

  height: calc(4rem-30px);

}

 

Folosirea calc() in operatiuni cu variabile CSS si SASS

Functia este la fel de eficienta si in cazul noilor variabile CSS

–text-input-width: 500px;

max-width: calc(var(–text-input-width) / 2);

 

Folosirea calc() in operatiuni cu variabile

Pentru a functiona, valoarea functiei calc() va trebui interpolata dupa cum urmeaza

$body_padding}: 20px;

 height: calc(100% – #{$body_padding})

Speram ca explicatia noastra ti-a fost de ajutor. Daca vrei sa primesti si alte solutii concrete pe care sa le folosesti in practica de zi cu zi, te incurajam sa ne urmaresti.



Alte articole si tutoriale:
« »

Oferta limitata eBook gratuit: DUBLEZA-TI VENITUL PRIN CUNOSTINTELE DE IT

Inscrie-te la newsletter si vei primi un eBook gratuit. Vei fi si informat despre ofertele speciale, tutoriale gratis si discount-urile pentru cursurile LEC Academy.

Download ebook
×

Abonare email

Accesul la tutorialele gratuite se face pe baza inscrierii la newsletter. Inscrie-te la newsletter-ul LEC Academy si ai acces la peste 40 de lectii gratuite. Daca doresti, vei fi informat despre ofertele speciale, promotiile si discount-urile pentru cursurile LEC Academy.

Vezi lectii gratis
×