ترفندهای متغیر CSS جالب را امتحان کنید

@شپلفالکسی شپلف

توسعه دهنده Ruby on Rails

متغیرهای CSS (یا ویژگی های سفارشی ، هر کدام که راحت تر باشند) در ابتدا برای ذخیره خصوصیات تکراری ، مانند پالت های رنگی یا فونت ها ، در یک مکان تهیه شده اند. کار با متغیرها در پردازنده های بسیار انعطاف پذیرتر است ، اما جادوی SASS / SCSS همیشه قابل استفاده نیست. در دنیای واقعی ، ما اغلب بدون آنها عمل می کنیم ، که ممکن است منجر به نفوذ کد و همچنین پرونده های غیرضروری و قالب بندی بیش از حد شود. در این مقاله ، ما چندین هک جالب را بررسی خواهیم کرد که به شما امکان می دهد از خصوصیات سفارشی برای آنچه بدون پیش پردازنده یا JS غیرممکن به نظر می رسد استفاده کنید.

از تعریف مجدد رنگ ها خودداری کنید

تعریف مضامین در CSS خالص دلپذیرترین تجربه نیست: تغییر به یک پالت تیره معمولاً نیاز به تغییر رنگ برای بسیاری از عناصر دارد ، به عنوان مثال پس زمینه ، متن ، پیوند ، دکمه و غیره. پرس و جو ، که در داخل آن باید رنگ های جدید برای همه انتخاب کنندگان قرار داده شود ، که منجر به نفخ می شود:

:root {
  --background: #fff;
  --text-color: #000;
  --link-color: #0089c7;
  --primary-color: #165fb9;
  /* ... */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1b1b1b);
    --text-color: #eaeaea;
    --link-color: #b76c10;
    --primary-color: #8916b9;
...