Գույն

Թեմայի գույները

Մենք օգտագործում ենք բոլոր գույների ենթաբազմությունը՝ գունային սխեմաներ ստեղծելու համար ավելի փոքր գունապնակ ստեղծելու համար, որը հասանելի է նաև որպես Sass փոփոխականներ և Sass քարտեզ Bootstrap-ի scss/_variables.scssֆայլում:

Այս բոլոր գույները հասանելի են որպես 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) և օգտագործում ենք հատուկ գունային ֆունկցիաներ՝ մեր գույները ներկելու (բացելու) կամ ստվերելու (մթնեցնելու) համար Sass-ի mix()գունային ֆունկցիայի միջոցով։

Օգտագործումը mix()նույնը չէ, ինչ lighten()և darken()— առաջինը միախառնում է նշված գույնը սպիտակի կամ սևի հետ, մինչդեռ երկրորդը միայն կարգավորում է յուրաքանչյուր գույնի թեթևության արժեքը: Արդյունքը շատ ավելի ամբողջական գույների հավաքածու է, ինչպես ցույց է տրված այս CodePen ցուցադրությունում :

Մեր tint-color()և shade-color()ֆունկցիաները օգտագործվում mix()են մեր փոփոխականի կողքին $theme-color-interval, որը սահմանում է աստիճանական տոկոսային արժեք մեր արտադրած յուրաքանչյուր խառը գույնի համար: Տե՛ս scss/_functions.scssև scss/_variables.scssֆայլերը ամբողջական կոդով:

Գունավոր Sass քարտեզներ

Bootstrap-ի աղբյուր Sass ֆայլերը ներառում են երեք քարտեզներ, որոնք կօգնեն ձեզ արագ և հեշտությամբ շրջել գույների ցանկը և դրանց վեցանկյուն արժեքները:

• $colorsթվարկում է մեր բոլոր առկա հիմնական ( 500) գույները
• $theme-colorsթվարկում է բոլոր իմաստային անվանումով թեմայի գույները (ցուցադրված է ստորև)
• $graysթվարկում է մոխրագույնի բոլոր երանգներն ու երանգները

Շրջանակներում scss/_variables.scssդուք կգտնեք Bootstrap-ի գունային փոփոխականները և Sass քարտեզը: Ահա $colorsSass քարտեզի օրինակ.

$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-ի և v5.1.0-ում ավելացված մեր ընդլայնված Sass քարտեզների միջոցով:

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}կոմունալ ծառայություններ յուրաքանչյուր գույնի և մակարդակի համար: Նույնը կարող եք անել նաև ցանկացած այլ կոմունալ և գույքի համար: