اگر شما هم مثل من هستید، کمی دیر وارد بازی متغیرهای CSS شده اید. شاید شما
(مثل من) از استفاده لذت بردم جاوا اسکریپت واقعی متغیرها با
CSS-in-JS. اما لعنتی به افراد باهوشی که می شناسم و به آنها احترام می گذارم
بگو شگفت انگیز است و من فقط باید این قطعه نسبتاً جدید را در آغوش بگیرم
پلت فرم
وقتی کاری را شروع می‌کنم، واقعاً از گرفتن یک سوپر قدردانی می‌کنم
فقط شروع کن تا برو
من شنیده ام که “متغیرهای CSS” و “ویژگی های سفارشی CSS” کمی دور ریخته می شوند.
مکالمه و واقعاً تفاوت را درک نکردم. معلوم می شود
آنها یک چیز هستند
🤦♂️ اصطلاح فنی “ویژگی های سفارشی CSS” است، اما اغلب به عنوان “CSS” شناخته می شود.
متغیرها”.
خوب، اینجاست. شروع سریع شما به خواص سفارشی:
html>
style>
:root {
--color: blue;
}
.my-text {
color: var(--color);
}
style>
body>
div class="my-text">This will be bluediv>
body>
html>
خطا در جاسازی https://codepen.io/kentcdodds/pen/NWryXMg
:root یک شبه کلاس است که مطابقت دارد . Actually, it’s exactly the same
as if we had used html به جای :root (مگر اینکه ویژگی بالاتری دارد).
درست مانند هر چیز دیگری در CSS، می‌توانید ویژگی‌های سفارشی خود را دامنه‌بندی کنید
بخش های سند بنابراین، به جای :root، می توانیم از یک ساده استفاده کنیم
انتخابگرها:
html>
style>
.blue-text {
--color: blue;
}
.red-text {
--color: red;
}
.my-text {
color: var(--color);
}
style>
body>
div class="blue-text">
div class="my-text">This will be bluediv>
div>
div class="red-text">
div class="my-text">This will be reddiv>
div>
body>
html>
خطا در جاسازی https://codepen.io/kentcdodds/pen/eYzVyKL
آبشار در اینجا نیز اعمال می شود:
html>
style>
.blue-text {
--color: blue;
}
.red-text {
--color: red;
}
.my-text {
color: var(--color);
}
style>
body>
div class="blue-text">
div class="my-text">This will be bluediv>
div class="red-text">
div class="my-text">
This will be red (even though it's within the blue-text div, the
red-text is more specific).
div>
div>
div>
body>
html>
خطا در جاسازی https://codepen.io/kentcdodds/pen/PozQEBb
و حتی می توانید مقدار ویژگی سفارشی را با استفاده از جاوا اسکریپت تغییر دهید:
html>
style>
.blue-text {
--color: blue;
}
.red-text {
--color: red;
}
.my-text {
color: var(--color);
}
style>
body>
div class="blue-text">
div class="my-text">
This will be green (because the JS will change the color property)
div>
div class="red-text">
div class="my-text">
This will be red (even though it's within the blue-text div, the
red-text is more specific).
div>
div>
div>
script>
const blueTextDiv = document.querySelector('.blue-text')
blueTextDiv.style.setProperty('--color', 'green')
script>
body>
html>
خطا در جاسازی https://codepen.io/kentcdodds/pen/jOrZYvY
شما آن را دارید، شروع فوق العاده ساده شما. در واقع نگفتم چرا
شما دوست دارید این کار را انجام دهید من به شما اجازه می دهم که به جستجوی خود ادامه دهید تا متوجه شوید (یا فقط
اجازه دهید تخیل خود را اجرا کند). امیدواریم این به شما کمک کند تا سریعا با آن آشنا شوید
ایده هر چند! موفق باشید!
P.S. آیا می خواهید بدانید در React چیست؟ این را بررسی کنید
خارج:
به جای React Context از متغیرهای CSS استفاده کنید.
