​احتمالا دقت کرده‌اید که وقتی می‌خوایم یه پراپرتی CSS رو تو حالت hover یا ... تغییر بدیم، مجبوریم اون پراپرتی رو دوباره با مقادیر جدید تکرار کنیم.

اما حالا با متغیرهای CSS و تابع calc میتونیم بدون تکرار کردن دوباره‌ی پراپرتی‌ها، بین دو مقدار switch کنیم. به عنوان مثال:

transform: rotate(calc(var(--i) * 45deg));
top: calc(var(--i) * 10px);

توی این کد اگر متغیر i = 0 باشه، عنصرمون rotate و top نداره.
حالا برای اینکه عنصر رو 45deg بچرخونیم و top 10px بهش بدیم، فقط کافیه مقدار متغیر i رو 1 کنیم!

دقت کنید که تو این ترفند داریم از ویژگی live بودن متغیرهای CSS استفاده می‌کنیم. پس با متغیرهای SASS نمیتونیم این کار رو انجام بدیم.

برای مقایسه‌ی بهتر، توی ویدیو پراپرتی‌های transform و background رو با استفاده از این ترفند (بدون تکرار کردن کردن پراپرتی‌ها) تغییر میدیم.

#quicktip #css #trick #dry

@ProGraphs