Ce este calc () în CSS (și cum să -l folosești)

Unele funcții CSS sunt puternice, dar rareori utilizate, nu pentru că sunt dificile, ci pentru că sunt disponibile alternative mai ușoare. Calc () este unul dintre ei. Este super util, dar adesea umbrit de Clamp ().

Calc () rezolvă unele probleme de aspect pe care Clamp () nu le pot atinge. Este excelent pentru înălțimile secțiunii de reglare fină, reglarea anteturilor lipicioase și amestecarea unităților flexibile și fixe într-o linie de cod. Și iată veștile bune: puteți utiliza Calc () fără a scrie o singură linie de cod.

În Divi 5, este încorporat chiar în interfață, așa că doar tastați valoarea dvs., iar Divi se ocupă de restul. Vrei să vezi cum? În această postare, veți afla cum funcționează Calc (), unde vă ajută și cum să -l utilizați în Divi 5.

Divi 5 este gata să fie utilizat pe site -uri web noi , dar așteptați puțin înainte de a migra cele existente.

Ce este Calc () în CSS?

Calc () este o funcție CSS nativă care vă permite să efectuați matematică simplă, cum ar fi adăugarea, scăderea, înmulțirea și împărțirea (cu unele limitări în funcție de context) direct în regulile dvs. de stil. Este excelent pentru modificarea dimensiunilor și distanțarea, mai ales atunci când amestecați valori fixe și flexibile pentru a obține machete mai ușoare, fără a codifica totul.

Să înțelegem acest lucru cu un exemplu. Să presupunem că doriți ca un element să preia 80% din ecran, dar totuși lăsați loc pentru căptușeală. Puteți scrie:

width: calc(80% - 40px);

Acest lucru spune browserului să calculeze dinamic lățimea scăzând 40 de pixeli de la 80 la sută din containerul său. Când este combinat cu tehnici de centrare precum marjele automate, spațiul rămas din scădere este distribuit uniform. Valoarea se ajustează automat pe baza dimensiunii ecranului.

La prima vedere, s -ar putea să nu pară inovatoare. Dar Calc () este ideal pentru rezolvarea problemelor de amenajare de zi cu zi, cum ar fi distanțarea ruptă pe ecrane mici, elemente care se suprapun anteturilor fixe și secțiuni din afara centrului. În loc de interogări media lungi, Calc () într -o linie este deseori suficient. Iată câteva cazuri comune de utilizare o singură linie:

• Padding: Calc (5VW + 20px); Menține lichidul de umplutură. Chiar și pe ecrane mici, nu scade niciodată sub 20 de pixeli.
• înălțime: Calc (100Vh - 80px); Mențineți conținutul vizibil atunci când aveți un antet fix. Se ajustează automat pe baza înălțimii ecranului.
• Lățime: Calc (60% - 1rem); Vă oferă un control flexibil asupra lățimii secțiunii, menținând în același timp o distanțare constantă. Puteți ajusta marjele înconjurătoare folosind valori precum marginea-stânga: Calc (40% + 0,5rem); pentru a centra sau alinia vizual elementul în containerul său.

Pe scurt, Calc () elimină nevoia de a scrie CSS suplimentar pentru fiecare punct de întrerupere. În loc să rescrieți stilurile în mod repetat, puteți construi logică direct în valorile dvs. și lăsați aspectul să răspundă automat. Nu numai că definiți dimensiunile, ci și decideți cum ar trebui să se comporte elementele.

Înțelegerea modului în care funcționează Calc ()

Sintaxa de bază a Calc () arată astfel:

 calc(value operator value) 

Aici, puteți utiliza orice lungime sau unitate valabilă în valoare, iar operatorul poate fi +, -, *sau /.

De exemplu, dacă doriți să reduceți lățimea unui element cu 40 de pixeli, ați scrie lățimea: Calc (100% - 40px);. Observați utilizarea %? Asta face lățimea flexibilă.

Dacă am folosi Calc (100px - 40px), rezultatul ar fi întotdeauna de 60 de pixeli, adică static. Dar folosind un procent, lăsăm browserul să calculeze dimensiunea pe baza ecranului sau a elementului părinte. Se ajustează automat pe măsură ce aspectul se modifică.

Sfat rapid (și, de asemenea, o regulă comună): Adăugați întotdeauna spații între valori și operatori pentru a face Calc () să funcționeze corect. Fără spații, CSS nu va funcționa. Mai jos, veți vedea că lățimea containerului este restabilită la implicit, deoarece funcția Calc () fără spații nu mai este valabilă:

Folosind mai multe unități

Ai văzut doar cum vine beneficiul real al Calc () când începi să combini diferite unități relative. De exemplu, procente cu pixeli sau lățimi de vizionare cu REMS, deoarece atunci când aspectul dvs. începe să răspundă pe baza modificărilor dimensiunii ecranului.

Pentru a face acest lucru mai clar, iată câteva combosuri utile pentru a încerca să vezi cum funcționează în machete reale.

De asemenea, puteți combina mai multe valori și unități într -o singură linie, ceea ce face ca dimensionarea machetei receptive să fie mai precisă. Acest exemplu de mai jos folosește %, PX și REM pentru a amesteca scalarea aspectului, distanțarea fixă ​​și tipografia:

 width: calc(50% - 40px + 1rem); 

• 50% solzi cu recipientul
• 40px scade spațiul fix ca o bară laterală
• 1rem adaugă distanță pe baza dimensiunii fontului

Funcții Calc () cuib

Puteți, de asemenea, să cuibăresc un calcul () în interiorul altuia pentru a construi o logică de aspect mai complexă. Este o modalitate excelentă de a reflecta modul în care gândiți despre design (strat după strat) cu relații clare între valori. De exemplu, lățimea: Calc (200px - Calc (100px + 2rem));

Aici, browserul calculează mai întâi 100px + 2rem , care ar putea reprezenta umplutură, marje sau dimensiunea altui element. Apoi scade acest lucru total de la 200px pentru a obține lățimea finală. Lățimea rămâne relativă din cauza REM.

Acest tip de cuibărit este util atunci când aspectul dvs. depinde de mai mult de un factor. În loc să faceți matematica singuri sau valorile fixe de codificare hard, puteți scrie relația direct în CSS. Îți menține designul flexibil și mai ușor de actualizat mai târziu.

Nu veți avea nevoie de deseori cuib () cuibărit, dar vă poate ajuta atunci când aveți de -a face cu distanță stratificată sau elemente suprapuse. Acestea fiind spuse, poate doriți să începeți mai întâi cu calcule simple, deoarece acestea pot fi copleșitoare. Adăugarea complexității se va simți natural odată ce vă veți simți confortabil cu modul în care funcționează.

De ce să folosiți Calc () când aveți clemă ()?

Dacă utilizați mai des Clamp (), este posibil să aveți această întrebare. Pentru a obține un răspuns clar, ar fi o idee bună să înțelegem diferența dintre cei doi:

Clamp () este modern, astfel încât să te entuziasmezi pentru a -l folosi pentru a construi proiecte de fluide fără a se baza pe întrebările media este ușor. Dar, chiar dacă Clamp () se simte mai inteligent, există multe situații în care Calc () este mai relevant, cum ar fi următoarele:

• Scăderea valorilor fixe din machete flexibile: Utilizarea înălțimii: Calc (100Vh - 80px) se asigură că o secțiune umple ecranul minus înălțimea unui antet fix, astfel încât elementele nu se suprapun. Clamp () nu poate face acest lucru, deoarece nu acceptă scăderea.
• Elemente offset cu precizie: o valoare precum marginea-stânga: Calc (50%-200px); Schimbă un element în raport cu recipientul său, păstrându -l la echilibru vizual. Clamp () nu poate efectua acest tip de poziționare relațională.
• Alinierea secțiunilor cot-by-side: vă ajută să creați machete receptive în două coloane, unde o coloană cu lățime: Calc (60%-2REM); Aproape 60% din spațiu minus un decalaj constant. Clamp () este ideal pentru scalarea unei singure valori, în timp ce Calc () excelează atunci când sunt necesare relații între valori multiple.

În total, Clamp () este excelent atunci când definiți modul în care o singură valoare ar trebui să se extindă pe dimensiunile ecranului. Dar Calc () este ceea ce aveți nevoie atunci când aspectul dvs. depinde de mai multe lucruri simultan, ca în cazurile de mai sus.

Combinarea Calc () + Clamp ()

În timp ce Calc () și Clamp () sunt puternice pe cont propriu, de ce să folosești unul când poți combina ambele? Puteți cuibări Calc () în interiorul clemei () pentru a construi modele de fluide cu logică încorporată, cum ar fi combinarea scalărilor flexibile cu un control precis.

De exemplu, Padding: Clamp (1rem, Calc (2VW + 10px), 3rem); Creează o distanță care se scalează între 1rem și 3rem, dar valoarea „preferată” se bazează pe o formulă Calc () care amestecă lățimea de vizionare și o valoare fixă.

Acest lucru vă oferă un control receptiv, logic și precis asupra designului dvs. Odată ce înveți când să folosești Calc () și Clamp () individual și când să le combini, poți controla complet aspectul fără a te baza pe punctele de întrerupere personalizate

Utilizarea variabilelor CSS cu Calc ()

De asemenea, puteți extinde flexibilitatea Calc () cu variabilele CSS. Combinați variabilele cu alte unități, faceți matematică pe ele și construiți logica aspectului în jurul valorilor reutilizabile. De exemplu, dacă definiți: root {–gap: 40px;}, atunci folosind padding: cal (var (–gap) + 1rem); Vă ajută să setați căptușeala receptivă pe baza valorilor dvs. rădăcină.

Notă: În timp ce utilizați variabile CSS în Calc (), înfășurați variabila dvs. în jurul var (). Vedeți cum am făcut mai sus.

Acest lucru vă permite să construiți un site web complet folosind un sistem de proiectare consecvent (variabilele dvs. CSS), având în același timp un control precis cu Calc (). Și dacă doriți să faceți modificări (globale), cum ar fi reglarea distanțării pe aspectul dvs., puteți face acest lucru schimbând valorile rădăcină.

Nu este atât de ușor cu clema (). În timp ce Clamp () acceptă variabilele CSS, fiecare valoare trebuie să se rezolve la o unitate completă, valabilă. Ce vreau să spun prin asta?

O funcție precum clema (1rem, var (–fluid-size), 3rem) funcționează numai dacă –fluid-size se rezolvă la ceva de genul 4VW. Și dacă trebuie să faceți matematică cu o variabilă, cum ar fi adăugarea sau scăderea din ea, trebuie să înfășurați acea parte în Calc (). Aceste lucruri minore fac ca calc () să fie esențiale atunci când construiți valori dinamice cu variabile.

Calc () în Divi 5

Atât Calc (), cât și Clamp () sunt funcții CSS avansate care vă oferă un control puternic asupra machetei, distanțarea și receptivității, dar numai dacă sunteți confortabil cod de scriere. Acest lucru limitează utilizarea lor la dezvoltatori sau profesioniști web. Dar ce se întâmplă cu cei care preferă fluxurile de lucru vizuale și încă doresc să folosească Calc () și Clamp () în proiectele lor? Poți face asta?

Da, poți. În Divi 5, atât Calc () cât și Clamp () sunt disponibile ca unități avansate și nu trebuie să scrieți o singură linie de cod pentru a lucra cu ele.

Abonați -vă la canalul nostru YouTube

Tot ce faceți este să introduceți Calc () direct în orice câmp de intrare numerică și asta este.

Constructorul Divi acționează instantaneu. După ce introduceți valoarea Calc (), primiți feedback live în timpul proiectării. Nu este nevoie să comutați între constructor, devtools sau previzualizări și nu ghiciți cum va arăta.

Divi 5 face ca construcția mai inteligentă și mai flexibilă să fie ușoară, fără a atinge codul. Puteți chiar combina Calc () cu variabilele de design ale Divi sau cu propriile variabile CSS pentru a crea machete dinamice reutilizabile. Îți voi arăta cum să faci asta în secțiunea următoare.

Apropo, știați că Divi 5 acceptă și toate funcțiile CSS în unități avansate? S -ar putea să doriți să aflați și despre ei

Aflați totul despre unitățile avansate ale Divi 5

Cum face Divi 5 folosind Calc () fără efort

Tocmai ai văzut că Divi 5 face utilizarea Calc () în proiectele tale fără efort, oferindu -ți previzualizări instantanee în timp ce lucrezi. Dar sunt mai multe. Divi oferă nu doar o soluție de soluție, ci o modalitate complet integrată, fără cod de a construi machete bazate pe logică, folosind aceleași instrumente pe care dezvoltatorii se bazează, fără a scrie o linie de cod.

Iată cum vă ajută să folosiți Calc () eroic în timp ce lucrați liniștit în umbre:

1. Aplicați Calc () pe orice câmp numeric

Doar pentru că nu codificați nu înseamnă că sunteți limitați. În Divi 5, Calc () funcționează oriunde este acceptată o valoare numerică (gândiți -vă: lățime, înălțime, căptușeală, marjă, gol, dimensiunea fontului, oriunde). Dacă câmpul acceptă un număr, acceptă Calc ().

Iar aplicarea Calc () este relativ simplă. Tot ce trebuie să faceți este să alegeți Calc () din celelalte unități avansate și să introduceți formula.

Acest lucru înseamnă că puteți gestiona aspectul de machetă vizual fără a părăsi constructorul. Fie că scade înălțimea unui antet fix, adăugarea unei distanțe flexibile la dimensiunile fontului sau amestecarea unităților pentru o mai bună reacție, Divi vă permite să faceți totul direct în câmpurile de proiectare.

Introduceți doar formula dvs., iar rezultatul se actualizează instantaneu-fără panouri de cod, fără comutare a filei și fără a doua ghicire. Este un control complet, construit chiar în fluxul de lucru.

2. Obțineți previzualizări instantanee live

Una dintre cele mai bune părți despre utilizarea Calc () în Divi 5 este că puteți vedea ce faceți în timp real. Nu trebuie să ghiciți cum va arăta distanța sau alinierea. Când introduceți formula Calc (), constructorul se actualizează instantaneu.

După cum puteți vedea, căptușirea s -a schimbat imediat pe măsură ce am introdus valorile Calc (). De asemenea, am schimbat între diferite puncte de întrerupere pentru a vă arăta cum se ajustează căptușirea în funcție de dimensiunea ecranului.

Oricare ar fi modificările pe care le faceți, veți vedea rezultatul pe măsură ce tastați. Acest feedback imediat vă ajută să înțelegeți modul în care calculul afectează aspectul dvs. și vă permite să reglați valorile rapid fără a comuta filele.

3. Construiți fluxuri de lucru avansate cu Calc ()

Utilizarea Calc () în Divi 5 nu este puternică, deoarece acum puteți adăuga sau scădea valori. Adevărata forță constă în deblocarea fluxurilor de lucru mai inteligente. Divi vă permite să combinați Calc () cu instrumente avansate precum Clamp (), variabile CSS, variabile de proiectare și presetări de grupuri de opțiuni, toate în interiorul unui constructor vizual.

Nu sunteți limitat la ajustări simple. Folosind Divi, puteți crea sisteme de aspect care să răspundă fluid la dimensiunea ecranului, să respectați reguli de distanțare consistente și să vă actualizați automat atunci când jetoanele de proiectare se schimbă. Să vedem cum:

1. Extindeți Calc () cu variabilele CSS

Divi 5 acceptă variabilele CSS direct în câmpurile de proiectare, ceea ce înseamnă că puteți defini valorile reutilizabile și calculați de la ele vizual. Să zicem că vreau să folosesc o căptușeală fixă ​​pe toate secțiunile mele de pagini, așa că o voi salva ca o variabilă CSS:

:root {
--section-padding: calc(4rem + 2vw);
}

Pentru a face acest lucru, voi merge la Setări de pagină> Advanced> CSS personalizat și voi adăuga valorile mele rădăcină aici:

Acum, în loc să intrați în formula completă peste tot, puteți utiliza doar var (–Section-padding) în orice câmp de căptușeală din Divi. Rezultatul se actualizează în direct, iar dacă schimb valoarea rădăcină mai târziu, întregul aspect reflectă instantaneu această schimbare.

Observați că unitatea avansată actualizată arată Calc var, ceea ce înseamnă că variabila CSS a fost introdusă folosind funcția var () în formula Calc ().

Utilizarea variabilelor CSS în DIVI este surprinzător de simplă. Puteți să le definiți doar pe pagina în sine, fără a vă atinge foaia de stil. Acest lucru ajută la menținerea unui cadru de proiectare consistent, la testarea noilor valori și la crearea de reguli de aspect receptiv.

2. Utilizați Calc () în cadrul dvs. de proiectare

Divi 5 vă permite să salvați valorile Calc () ca variabile de proiectare, ceea ce face ușor să reutilizați o logică de aspect pe întregul site web. Să zicem că doriți ca secțiunile dvs. de service să completeze întotdeauna ecranul minus înălțimea unui antet fix. Apoi, puteți crea o variabilă de număr și puteți numi înălțimea secțiunii cu valoarea Calc (120Vh - 30px).

Aici, 30px este înălțimea antetului fix.

Acum, pentru a aplica variabila salvată, accesați setările de proiectare ale secțiunii și treceți peste înălțime pentru a localiza pictograma câmpului dinamic. Faceți clic pe el și va apărea variabila salvată. Faceți clic pe înălțimea secțiunii pentru a o aplica.

Această abordare vă oferă un control complet al aspectului, păstrând în mod consecvent designul. Nu sunteți blocat în presetări sau valori statice. În schimb, construiți o logică care se adaptează pe pagini, șabloane și dimensiuni ale ecranului toate vizual.

Variabilele de proiectare deblochează posibilități mari. De exemplu, puteți să vă construiți cadrul de proiectare vizual și să îl utilizați pe toate paginile site -ului dvs. web pentru a menține regulile de proiectare consecvente. De asemenea, vă recomandăm să vă construiți tipografia și sistemele de distanțare și dimensionare înainte de a proiecta orice pagină.

3. Creare și salvare presetări de grupuri de opțiuni

Odată ce aspectul dvs. folosește în mod constant valorile Calc (), Divi 5 face ușoară economisirea logicii pentru reutilizare. Puteți stoca întreaga configurație de stil (sau setări individuale, cum ar fi căptușeală, lacune, marje și lățimi) ca presetări de grupuri de opțiuni. Aceasta înseamnă că, în loc să aplici în mod repetat formulele Calc (), trebuie doar să selectați o presetare, iar aspectul matematicii se aplică instantaneu.

De exemplu, dacă ați folosit Padding: Calc (4REM + 2VW) pe mai multe secțiuni, nu trebuie să o retipați peste tot. Salvați -l doar ca prestabilire:

Acum, aplicați presetarea salvată oriunde este nevoie. Totul se actualizează vizual, astfel încât să puteți vedea efectul în direct.

Și mai bine, dacă ați utilizat variabile de proiectare în aceste presetări, puteți actualiza valorile la nivel global mai târziu. Schimbați variabila o dată și fiecare presetare folosind ea va reflecta actualizarea. Acest lucru face ca modificările la scară largă să fie rapide și consecvente.

Observați cum prin schimbarea valorilor salvate în variabilele de proiectare, acestea sunt actualizate și în secțiunea Padding, oferindu -ne, de asemenea, o previzualizare live? Acest lucru se datorează faptului că am folosit variabila de înălțime a secțiunii în presetarea secțiunii de distanțare .

Aceasta este puterea Divi 5. Vă ajută să vă extindeți sistemul de proiectare, păstrând logica de aspect avansată în mod consecvent pe site. După ce te obișnuiești să combini unități avansate precum Calc () (vezi aici mai multe cazuri de utilizare Calc () cu sfaturi despre stăpânirea lor eficientă) cu sistemul de design modular Divi, veți debloca o modalitate eficientă și distractivă de a construi site -uri web.

Divi face matematica să se simtă ușor

Nu trebuie să fiți un dezvoltator pentru a utiliza funcții CSS precum Calc () și Clamp (). Divi 5 aduce aceste instrumente avansate într -o interfață vizuală ușor de explorat, testat și aplicat. Puteți face totul, de la modificări simple de aspect până la sisteme complexe de proiectare, fără a scrie o linie de cod.

Indiferent dacă ajustați distanțarea, utilizați variabile sau construiți presetări reutilizabile, Divi face ca designul receptiv să fie accesibil pentru toată lumea. Doriți să testați cât de bine funcționează Calc () în Divi? Descărcați astăzi Alpha Public Divi și experimentați -o pentru dvs.

Divi 5 este gata să fie utilizat pe site -uri web noi, dar așteptați puțin înainte de a migra cele existente.