استخراج رنگ از فایل css

15 امتیاز

Loading…

بسم الله الرحمن الرحیم

داستان از این قراره که برای اکثر قالبهایی که در تیم wd7 طراحی میشه نیاز به امکان چند رنگه کردن سایت هست.

به این مضمون که کاربر توانایی انتخاب رنگ قالب خودش رو داشته باشه.

روال دستی این کار که انجام میشه به این صورت هست:

1. ابتدا کد رنگ اصلی مشخص میشه
2. در فایل css به دنبال جاهایی گشته میشه که اون کد رنگ استفاده شده
3. بعد از پیدا کردن دستوراتی که حاوی رنگ هستند،اونها رو در یک فایل جدا کنار هم جا میدیم
4. و نهایتا کد رنگ جدید رو با یه !important به این دستورات پیدا شده اعمال می کنیم

در ادامه مثال میزنم.

استخراج کد رنگ از فایل css بصورت دستی

اگر فایل css فرضی ما محتواش به این صورت باشه:

body {
  background: #ededed;
}
article p.desc {
  color: blue;
}
.footer {
  background: #ededed;
}
.footer h2 {
  color: blue;
}
.cp {
  color: blue;
  background: blue;
}

باید خروجی فایل من برای رنگ دلخواه سایت مثل این باشه:

article p.desc ,.footer h2,.cp{color:blue;}

حالا کافیه اون blue رو من رنگ دلخواهم تغییر بدم و اون رو مهم کنم: !important

پس در حقیقت نوعی فاکتور گیری می کنیم و کد رنگ رو بهش میدیم.

خب این پروسه برای فایلهای کوچک ساده ست،اما برای فایل های حجیم یک پروژه کاری واقعی زمان بره.

در ادامه راه حل خودکار رو خواهم گفت.

استخراج کد رنگ از فایل css بصورت خودکار

خب تو فکر همین مساله بودم که به پست آقای Dmitry Mayorov بر خوردم:

https://dmtrmrv.com/extract-color-from-css-file/

ایشون هم در این پست مورد مشابه بنده رو داشتن و در نهایت دست به کار شدن و در بستر Nodejs ابزاری رو نوشتن که این پروسه دستی رو خودکار انجام میده.

برای استفاده ابتدا مطمئن شید که Nodejs روی سیستم شما نصب باشه.بعد از اون دستور زیر رو برای نصب برنامه آقای دمیتری بزنید:

npm install -g css-color-grab-cli

بعد از اینکه برنامه نصب شد ،از طریق ترمینال به مسیر فایل css مون میریم.حالا اگر اسم فایل ما custom.css و کد رنگ ما هم #FFA700 باشه باید دستور زیر رو بزنیم:

css-color-grab FFA700  custom.css FFA700.css

اگر دقت کنید از علامت # در رنگ استفاده نشده و در انتهای کار فایل خروجی ای که فاکتورگیری شده رو میدیم تا برنامه خروجی خودشو در اون بنویسه.بعد از اجرا در کسری از ثانیه فایل و المنتهای مورد نظر ما برای اعمال چندرنگه اماده ست.

نکات استفاده:

1. برای وارد کردن نام کد رنگ از علامت # استفاده نشه
2. رنگ هایی که به اسم وارد میشن متاسفانه ساپورت نمیشن تو برنامه

مسیر گیت هاب پروژه:

https://github.com/dmtrmrv/css-color-grab-cli