كنت تصدق إنك تقدر تكتب Logic جوا ال CSS؟#

تعال هقولك إزاي تعمل كل دول:

Conditions (if/then)
Loops (for, while)
Logical Gates (===, &&, etc.)
Variables. كأنها لغة برمجة زي ال JS، مع العلم إنها مش لغة برمجة!

1. Variables#

إسمها في ال CSS الـ Custom Properties

:root {
    --color: orange;
}

span {
    color: var(--color, blue);
}

بتعرف متغير في ال CSS عن طريق ال double-dash وبعد كدا بت assign له قيمة. الكلام دا لازم يحصل جوا CSS scope بمعني تاني جوا selector لإنك لو عرفت متغير برا ال selector، إنت كدا بت break the CSS syntax

طب لو عاوز أعرف متغير في ال global scope بسيطة هتحطه جوا ال :root selector

طب لو عاوز أعمل access للمتغيرات دي من ال js ؟

// set --s on :root
document.documentElement.style.setProperty('--s', e.target.value);

// set --s scoped to #myID
const el = document.querySelector('#myID');
el.style.setProperty('--s', e.target.value);

// read variables from an element
const switchValue = getComputedStyle(el).getPropertyValue('--s');

2. Conditions#

بص، طريقة كتابتها بتختلف حسب المكان اللي هتستخدمها فيه بمعني إيه؟

عشان تفهمني لازم تفرق بين حاجتين:

إن ال selector له ال scope الخاص بال element بتاعه.
وإن media queries ال scope بتاعها بيكون global.

مثال على الاستخدام

<div data-attr="true">This is true</div>
<div data-attr="false">This is false</div>
<div>This is undefined</div>

ودا ال style الخاص بيهم:

[data-attr="true"] {
  /* if */
}
[data-attr="false"] {
  /* elseif */
}
:not([data-attr]) {
  /* else */
}

فهمت؟ بكل بساطة هنا بي apply styles conditionally based on element attributes or states.

مثال آخر باستخدام :checked

:checked {
  /* if */
  border: 2px solid blue;
}

:not(:checked) {
  /* else */
  border: 2px solid gray;
}

دا تطبيق تاني لل Condition في ال media queries

/* Media query for screens wider than 600px */
@media (min-width: 600px) {
  .container {
    background-color: lightblue;
  }
  
  p {
    font-size: 20px;
  }
}

ف هنا هو applies styles only when the viewport width is 600 pixels or wider.

3. Loops#

بص، في ال CSS counters هي شكل من أشكال loops، بس فيه هنا restriction كبير جدًا، وهو إنه مقدرش أستخدم ال counters إلا جوا ال content property. مثال على استخدام counters

main {
  counter-reset: section;
}

section {
  counter-increment: section;
}

section > h2::before {
  content: "Headline " counter(section) ": ";
}

وهنا اللي بيتم 3 خطوات

initializes a counter named section to 0 when the main element is rendered.
Each time a section element is encountered, the section counter is incremented by 1.
Sets the content of the ::before pseudo-element to display the word “Headline” followed by the current value of the section counter and a colon.

استخدام Grid’s auto-fill property

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

This fills the grid with as many elements as it can fit, while scaling them to fill the available space.

طول ما عندك مساحة هبيأكل منك

وطبعا مننساش فكرة ال looped selectors اللي بتستلم منك argument اللي ممن تحطه كمعادلة عشان توصل للelement اللي انت عاوزه ، كبرتوا الموضوع it’s just a Css

section:nth-child(2n) {
  /* selects every even element */
}

section:nth-child(4n + 2) {
  /* selects every fourth, starting from the 2nd */
}

4. Logic Gates#

عشان بس نكون ع نور، CSS itself does not support logical operations directly.

أومال اي اللي بيحصل؟ احنا بس نقدر نحقق دا عن طريق إن بنعمل combination بين ال CSS variables and calc method.

طيب بنستخدم logical operations دي ف إيه ؟ لا دي بتعمل سحر ف الحقيقة ! وبتستخدمها في

dynamic theming
conditional styling based on user preferences
وممكن كمان تستخدمها في 3D modeling and animating objects

بص حط دي في جوجل وادعيلي: Logical Operations with CSS Variables.

Join our whatsapp group here
My Channel here