آیا می خواهید با Inline CSS یک شناور بنویسید؟ از متغیرهای CSS استفاده کنید.

  • شروع کننده موضوع ahmad
  • تاریخ شروع

ahmad

Administrator
عضو کادر مدیریت
روزی در حال کار بر روی یک وبلاگ بودم که هر پست دارای یک رنگ سفارشی برای کمی شخصیت بخشیدن به آن متصل شده است. نویسنده باید هنگام نوشتن پست ، آن رنگ را در CMS انتخاب کند. فقط یک لایه فوق العاده سبک هنری.


برای اینکه آن رنگ در قسمت جلویی نشان داده شود ، من مقادیر را درست در یک ویژگی سبک inline روی عنصر <article> نوشتم. الگوهای من اتفاقاً Liquid بوده است ، اما این در سایر زبانهای شبیه ساز به نظر می رسد:

CSS:
{% for post in posts %}
<article style="background: {{post.custom_color}}">
  <h1>{{post.title}}</h1>
  {{content}}
</article>
{% endfor %}

مشکلی وجود ندارد اما بعد فکر کردم ، "آیا خوب نیست که رنگ سفارشی فقط هنگام قرار گرفتن روی کارت مقاله نشان داده شود؟" اما نمی توانید سبک های شناور را در یک ویژگی سبک بنویسید ، درست است؟

اولین ایده من این بود که ویژگی style را در جای خود بگذارم و CSS را به این شکل بنویسم:


CSS:
article {
  background: lightgray !important;
}
article:hover {
  /* Doesn't work! */
  background: inherit;
}



با استفاده از important ! می توانم سبک درون خطی را نادیده بگیرم ، اما هیچ راهی برای خنثی کردن این حالت وجود ندارد.

در نهایت ، من تصمیم گرفتم که از یک ویژگی سبک برای دریافت مقدار رنگ از CMS استفاده کنم ، اما به جای استفاده فوری از آن ، آن را به عنوان یک متغیر CSS ذخیره کنید:

CSS:
<article style="--custom_color: {{post.custom_color}}">
  <h1>{{post.title}}</h1>
  {{content}}
</article>

سپس ، از آن متغیر می توان برای تعریف سبک شناور در CSS معمولی استفاده کرد:


CSS:
article {
  background: lightgray;
}
article:hover {
  /* Works! */
  background: var(--custom_color);
}


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


CSS:
article a {
  color: var(--custom_color);
}


و از آنجا که متغیر از عنصر <article> استفاده می کند ، بر هیچ چیز دیگری در صفحه تأثیر نخواهد گذاشت. حتی می توانیم چندین پست را در همان صفحه نمایش دهیم که هر کدام با رنگ دلخواه خود نمایش می دهد.


شما اجازه مشاهده لینک را ندارید همین حالا ثبت نام کنید یا وارد سیستم شوید.
:love:
 
آخرین ویرایش:
بالا