CSS: دليل دالة calc () الكامل

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

دالة Calc () وقيم خصائص 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
  );
}

الدالة calc () هي أداة للعمل بخصائص رقمية.

.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 () في استعلامات الوسائط

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

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

استخدام وحدات مختلفة في تعبير واحد

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

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

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

مقارنة calc () مع حسابات المعالج الأولي

$padding: 1rem;

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

الكشف عن معنى القيم الرقمية المستخدمة في 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); }

العمليات الحسابية للدالة الحسابية ()

.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);
}

أهمية المساحات

.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);
}

الإنشاءات المتداخلة: 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);
}

خصائص CSS المخصصة وحساب ()

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);
}

تعيين الوحدات إلى الخصائص المخصصة بعد إعلان هذه الخصائص

html {
  --importantNumber: 2;
}

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

العمل مع الزهور

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

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

لا يمكنك الجمع بين calc () و 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));
}

أدوات المتصفح

دعم المتصفح

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

• متصفح فايرفوكس أدناه الإصدار 59 لا يدعم calc()الوظائف المستخدمة لتعيين اللون. على سبيل المثال: color: hsl(calc(60 * 2), 100%, 50%).
• لن يقوم IE 9-11 بتقديم الظل المحدد بواسطة الخاصية box-shadowإذا تم استخدامه لتحديد أي من القيم calc().
• لا يدعم IE 9-11 ولا Edge تصميم طريقة العرض width: calc()عند تطبيقها على خلايا الجدول.

أمثلة على الحياة

• أنا استخدم calc()لإنشاء فئة المساعد للحقول الإدارة: .full-bleed { width: 100vw; margin-left: calc(50% — 50vw); }. يمكنني القول أنه calc()في أفضل 3 ميزات مفيدة لـ CSS.
• لقد استخدمت هذه الوظيفة لتخصيص مساحة لـ "تذييل" ثابت للصفحة.
• 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.
• أتقدم بطلب calc()للتحايل على القيود background-position. هذا ينطبق بشكل خاص على القيود على تعديل مواضع تغيير اللون في التدرجات. على سبيل المثال ، يمكن وصف ذلك على النحو التالي: "ضع موضع تغيير اللون ، وليس الوصول 0.75emإلى الأسفل".