كنت تصدق إنك تقدر تكتب Logic جوا ال css ؟
تعال هقولك إزاي تعمل كل دول
Conditions (if/then), Loops (for, while), Logical Gates (===, &&, etc.) and Variables.
كأنها لغة برمجة زي ال js ، مع العلم إنها مش لغة برمجة !
نبدأ بال 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 alement
const switch = getComputedStyle(el).getPropertyValue('--s');



نخش بقي علي ال 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. These styles are scoped to the elements that match the selector criteria..
: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


تالت حاجة هي ال loops
بص في ال css ال Counters are form of loops
بس فيه هنا Restriction كبير جدا ، وهو إنه مقدرش أستخدم الcounters إلا جوا ال content property



main {
counter-reset: section;
}

section {
counter-increment: section;
}

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

وهنا اللي بيتم 3 خطوات
1 - initializes a counter named section to 0 when the main element is rendered.
2 - Each time a section element is encountered, the section counter is incremented by 1.
3 - 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.

طب لو عاوز أطبق فكرة الloop نفسه تطبق في layout متكرر ؟
هنا ييجي دور ال 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 */
}

نيجي بقي لأخر حاجة وهي ال 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