Түс

Тақырып түстері

Түс схемаларын жасау үшін кішірек түстер палитрасын жасау үшін барлық түстердің жиынын қолданамыз, сонымен қатар Bootstrap scss/_variables.scssфайлында Sass айнымалылары және Sass картасы ретінде қолжетімді.

Барлық осы түстер Sass картасы ретінде қол жетімді $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Осы түстерді қалай өзгертуге болатынын білу үшін Sass карталары мен ілмектер құжаттарын қараңыз .

Барлық түстер

scss/_variables.scssБарлық Bootstrap түстері Sass айнымалылары және файлдағы Sass картасы ретінде қол жетімді . Файл өлшемдерінің ұлғаюына жол бермеу үшін біз осы айнымалылардың әрқайсысы үшін мәтін немесе фондық түс сыныптарын жасамаймыз. Оның орнына біз тақырып палитрасы үшін осы түстердің жиынын таңдаймыз .

Түстерді теңшеу кезінде контраст коэффициенттерін қадағалаңыз. Төменде көрсетілгендей, біз негізгі түстердің әрқайсысына үш контраст қатынасын қостық — біреуі үлгінің ағымдағы түстері үшін, біреуі аққа қарсы және біреуі қараға қарсы.

Sass туралы ескертпелер

Sass айнымалы мәндерді бағдарламалық түрде генерациялай алмайды, сондықтан біз әр реңк пен реңк үшін айнымалы мәндерді қолмен жасадық. Біз ортаңғы нүкте мәнін (мысалы, $blue-500) көрсетеміз және Sass түс функциясы арқылы түстерімізді реңктеу (ашықтандыру) немесе көлеңкелеу (қараңғылау) үшін реттелетін түс функцияларын қолданамыз mix().

Қолдану және mix()сияқты емес — біріншісі көрсетілген түсті ақ немесе қара түспен араластырады, ал екіншісі әр түстің ашықтық мәнін ғана реттейді. Нәтиже осы CodePen демонстрациясында көрсетілгендей, түстердің әлдеқайда толық жиынтығы болып табылады .lighten()darken()

Біздің tint-color()және shade-color()функцияларымыз айнымалымен mix()қатар қолданылады $theme-color-interval, ол біз шығаратын әрбір аралас түс үшін сатылы пайыздық мәнді көрсетеді. Толық бастапқы код үшін scss/_functions.scssжәне файлдарын қараңыз .scss/_variables.scss

Түсті Sass карталары

Bootstrap бастапқы Sass файлдары түстер тізімі мен олардың он алтылық мәндерін жылдам және оңай айналдыруға көмектесетін үш картаны қамтиды.

• $colorsбарлық қолжетімді негізгі ( 500) түстердің тізімін береді
• $theme-colorsбарлық семантикалық аталған тақырып түстерін тізімдейді (төменде көрсетілген)
• $graysсұр түстің барлық реңктері мен реңктерін тізімдейді

ішінде scss/_variables.scssBootstrap түсінің айнымалы мәндерін және 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және қызметтік бағдарламаларды қамтымайды , бірақ оларды API утилитамызбен және v5.1.0 нұсқасына қосылған кеңейтілген Sass карталарымен өзіңіз жасай аласыз.background-color

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}Бұл әр түс пен деңгей үшін жаңа утилиталарды жасайды . Кез келген басқа утилита мен мүлік үшін де солай істей аласыз.