رنگ

رنگ های تم

ما از زیرمجموعه‌ای از همه رنگ‌ها برای ایجاد یک پالت رنگ کوچک‌تر برای تولید طرح‌های رنگی استفاده می‌کنیم، که همچنین به عنوان متغیرهای 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,
  "black":      $black,
  "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مقادیر رنگ موجود است.

تولید آب و برق

Bootstrap شامل colorو background-colorابزارهای کمکی برای هر متغیر رنگی نمی‌شود، اما شما می‌توانید با استفاده از API ابزار ما و نقشه‌های Sass توسعه‌یافته ما که در نسخه 5.1.0 اضافه شده‌اند، اینها را ایجاد کنید.

1. برای شروع، مطمئن شوید که توابع، متغیرها، میکس‌ها و ابزارهای ما را وارد کرده‌اید.
2. از map-merge-multiple()تابع ما برای ادغام سریع چندین نقشه Sass با هم در یک نقشه جدید استفاده کنید.
3. این نقشه ترکیبی جدید را ادغام کنید تا هر ابزاری را با {color}-{level}نام کلاس گسترش دهید.

در اینجا یک مثال است که ابزارهای رنگ متن (به عنوان مثال، .text-purple-500) را با استفاده از مراحل بالا تولید می کند.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

.text-{color}-{level}این ابزارهای جدید برای هر رنگ و سطح ایجاد می کند. شما می توانید همین کار را برای هر ابزار و ملک دیگری نیز انجام دهید.