رنگ
بوت استرپ توسط یک سیستم رنگی گسترده پشتیبانی میشود که سبکها و اجزای ما را مضمون میکند. این امکان سفارشی سازی و توسعه جامع تری را برای هر پروژه ای فراهم می کند.
رنگ های تم
ما از زیرمجموعهای از همه رنگها برای ایجاد یک پالت رنگ کوچکتر برای تولید طرحهای رنگی استفاده میکنیم، که همچنین به عنوان متغیرهای Sass و نقشه Sass در scss/_variables.scss
فایل Bootstrap موجود است.
همه این رنگ ها به عنوان نقشه Sass موجود است $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
برای نحوه اصلاح این رنگها، نقشههای Sass و اسناد حلقههای ما را بررسی کنید .
همه رنگ ها
تمام رنگ های Bootstrap به عنوان متغیرهای Sass و نقشه Sass در scss/_variables.scss
فایل موجود هستند. برای جلوگیری از افزایش اندازه فایل، کلاس رنگ متن یا پسزمینه برای هر یک از این متغیرها ایجاد نمیکنیم. در عوض، زیر مجموعه ای از این رنگ ها را برای پالت تم انتخاب می کنیم .
هنگام سفارشی سازی رنگ ها، حتما نسبت کنتراست را کنترل کنید. همانطور که در زیر نشان داده شده است، ما سه نسبت کنتراست به هر یک از رنگهای اصلی اضافه کردهایم – یکی برای رنگهای فعلی نمونه، یکی در مقابل سفید و دیگری برای رنگهای سیاه.
یادداشت هایی در مورد ساس
Sass نمی تواند به صورت برنامه نویسی متغیرها را تولید کند، بنابراین ما به صورت دستی متغیرهایی را برای هر رنگ و سایه ایجاد می کنیم. ما مقدار نقطه میانی را مشخص می کنیم (به عنوان مثال، $blue-500
) و از توابع رنگ سفارشی برای رنگ آمیزی (روشن) یا سایه (تاریک کردن) رنگ ها از طریق mix()
تابع رنگ Sass استفاده می کنیم.
استفاده از mix()
و lighten()
- darken()
اولی رنگ مشخص شده را با سفید یا سیاه ترکیب می کند، در حالی که دومی فقط مقدار روشنایی هر رنگ را تنظیم می کند. نتیجه یک مجموعه رنگ بسیار کامل تر است، همانطور که در این نسخه نمایشی CodePen نشان داده شده است .
ما tint-color()
و shade-color()
توابع mix()
در کنار $theme-color-interval
متغیر ما استفاده می شوند، که یک مقدار درصد پله ای را برای هر رنگ مخلوطی که تولید می کنیم مشخص می کند. برای کد منبع کامل به scss/_functions.scss
و فایل ها مراجعه کنید .scss/_variables.scss
نقشه های ساس رنگی
فایلهای Sass منبع بوت استرپ شامل سه نقشه است که به شما کمک میکند تا به سرعت و به آسانی فهرستی از رنگها و مقادیر هگز آنها را حلقه بزنید.
$colors
تمام رنگ های پایه (500
) موجود ما را لیست می کند$theme-colors
همه رنگهای تم با نام معنایی را فهرست میکند (در زیر نشان داده شده است)$grays
همه رنگ ها و سایه های خاکستری را فهرست می کند
در داخل scss/_variables.scss
، متغیرهای رنگ Bootstrap و نقشه Sass را خواهید یافت. در اینجا یک نمونه از $colors
نقشه Sass آمده است:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
مقادیر را در نقشه اضافه، حذف یا تغییر دهید تا نحوه استفاده از آنها در بسیاری از مؤلفههای دیگر بهروزرسانی شود. متأسفانه در حال حاضر، همه مؤلفه ها از این نقشه Sass استفاده نمی کنند. به روز رسانی های آینده در تلاش برای بهبود این موضوع خواهد بود. تا آن زمان، برای استفاده از ${color}
متغیرها و این نقشه Sass برنامه ریزی کنید.
مثال
در اینجا نحوه استفاده از آنها در Sass آمده است:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
کلاس های ابزار رنگ و پس زمینه نیز برای تنظیم color
و background-color
استفاده از 500
مقادیر رنگ موجود است.