CSS: panduan fungsi calc penuh ()

.main-content {
  /*  80px  100vh */
  height: calc(100vh - 80px);
}

Fungsi Calc () dan nilai properti CSS

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

.el {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}

Fungsi calc () adalah alat untuk bekerja dengan properti numerik.

.el {
  /* ! */
  counter-reset: calc("My " + "counter");
}
.el::before {
  /* ! */
  content: calc("Candyman " * 3);
}

line-height: calc(1.2 * 1.2);

transform: rotate(calc(10deg * 5));

.el {
  /*   ,    */
  width: calc(20px);
}

Calc () tidak dapat digunakan dalam kueri media

@media (max-width: 40rem) {
  /* 40rem   */
}

/*  ! */
@media (min-width: calc(40rem + 1px)) {
  /* ,  40rem */
}

Menggunakan unit yang berbeda dalam satu ekspresi

/*      */
width: calc(100% - 20px);

transform: rotate(calc(1turn + 45deg));

animation-delay: calc(1s + 15ms);

Perbandingan calc () dengan perhitungan preprocessor

$padding: 1rem;

.el[data-padding="extra"] {
  padding: $padding + 2rem; //  3rem;
  margin-bottom: $padding * 2; //  2rem; 
}

Mengungkapkan makna nilai numerik yang digunakan dalam CSS

.el {
  /*   , */
  width: calc(100% / 7);

  /*   */
  width: 14.2857142857%;
}

[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }

Fungsi Operator Matematika dari calc ()

.el {
  /*  */
  margin: calc(10px + 10px);

  /*  */
  margin: calc(10px + 5);
}

.el {
  /*  */
  margin: calc(30px / 3);

  /*  */
  margin: calc(30px / 10px);

  /*  (   ) */
  margin: calc(30px / 0);
}

.el {
  /*  */
  margin: calc(10px * 3);

  /*  */
  margin: calc(3 * 10px);

  /*  */
  margin: calc(30px * 3px);
}

Pentingnya ruang

.el {
  /*  */
  font-size: calc(3vw + 2px);

  /*  */
  font-size: calc(3vw+2px);

  /*  */
  font-size: calc(3vw - 2px);

  /*  */
  font-size: calc(3vw-2px);
}

.el {
  /*  */
  width: calc(
    100%     /   3
  );
}

.el {
  /*  */
  width: calc (100% / 3);
}

Konstruksi bersarang: calc (calc ())

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

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

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

.el {
  /* ,   , */
  width: calc(100% + 2rem / 2);

  /*     ,    */
  width: calc((100% + 2rem) / 2);
}

Properti CSS kustom dan calc ()

html {
  --spacing: 10px;
}

.module {
  padding: calc(var(--spacing) * 2);
}

html {
  --spacing: 10px;
  --spacing-L: var(--spacing) * 2;
  --spacing-XL: var(--spacing) * 3;
}

.module[data-spacing="XL"] {
  padding: calc(var(--spacing-XL));
}

<div style="--index: 1;"> ... </div>
<div style="--index: 2;"> ... </div>
<div style="--index: 3;"> ... </div>
div {
  /*     HTML (   ) */
  animation-delay: calc(var(--index, 1) * 0.2s);
}

Menetapkan Unit ke Properti Kustom Setelah Mendeklarasikan Properti Ini

html {
  --importantNumber: 2;
}

.el {
  /*    ,  ,        */
  padding: calc(var(--importantNumber) * 1rem);
}

Bekerja dengan bunga

html {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

.el {
  background: hsl(
    calc(var(--H) + 20),
    calc(var(--S) - 10%),
    calc(var(--L) + 30%)
  )
}

Anda tidak dapat menggabungkan calc () dan attr ()

<div data-color="red">...</div>
div {
  /*    */
  color: attr(data-color);
}

div::before {
  content: attr(data-color);
}

<div class="grid" data-columns="7" data-gap="2">...</div>
.grid {
  display: grid;

  /*         */
  grid-template-columns: repeat(attr(data-columns), 1fr);
  grid-gap: calc(1rem * attr(data-gap));
}

<div class="grid" style="--columns: 7; --gap: 2rem;">...</div>
.grid {
  display: grid;

  /* ! */
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: calc(var(--gap));
}

Alat peramban

Dukungan browser

.el {
  width: 92%; /*   */
  width: calc(100% - 2rem);
}

• Browser Firefox di bawah versi 59 tidak mendukung calc()fungsi yang digunakan untuk mengatur warna. Sebagai contoh: color: hsl(calc(60 * 2), 100%, 50%).
• IE 9-11 tidak akan membuat bayangan yang ditentukan oleh properti box-shadowjika digunakan untuk menentukan nilai apa pun calc().
• Baik IE 9-11 maupun Edge mendukung desain tampilan width: calc()ketika diterapkan pada sel tabel.

Contoh kehidupan

• Saya menggunakan calc()untuk menciptakan kelas pembantu untuk bidang manajemen: .full-bleed { width: 100vw; margin-left: calc(50% — 50vw); }. Saya dapat mengatakan bahwa ini calc()ada dalam 3 fitur CSS saya yang paling berguna.
• Saya menggunakan fungsi ini untuk mengalokasikan ruang untuk "footer" tetap halaman.
• calc() . , font-size, . font-size — calc() line-height. ( , calc() , , , rem em. , ).
• , . . — : .margin { width: calc( (100vw — var(--content-width)) / 2); }.
• calc() - , . : .drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height)); }.
• , .
• , padding vw/vh.
• Saya berlaku calc()untuk menghindari batasan background-position. Ini terutama berlaku untuk pembatasan penyesuaian posisi perubahan warna dalam gradien. Sebagai contoh, ini dapat digambarkan sebagai berikut: "posisi posisi perubahan warna, tidak mencapai 0.75embagian bawah."