रंग

थीम रंग

scss/_variables.scssरंग येवजण्यो तयार करपाखातीर ल्हान रंग पॅलेट तयार करपाक आमी सगळ्या रंगांचो उपसमुह वापरतात, जो Sass चडांत चड आनी Bootstrap च्या फायलीन 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सगळे बूटस्ट्रॅप रंग Sass चडांत चड आनी फायलीन Sass नकासो म्हणून उपलब्ध आसात . वाडिल्ले फायल आकार टाळपाखातीर, आमी ह्या दरेका व्हेरिएबलाक मजकूर वा पार्श्वभूंय रंग वर्ग तयार करिनात. ताचे बदला, आमी ह्या रंगांचो उपसमुह एक थीम पॅलेटा खातीर निवडटात .

रंग पसंतीचे करतना विपरीत प्रमाणांचेर नियंत्रण दवरपाची खात्री करात. सकयल दाखयल्ले प्रमाणें, आमी दरेका मुखेल रंगाक तीन कॉन्ट्रास्ट रेशियो जोडल्यात-एक स्वॅचच्या सद्याच्या रंगां खातीर, एक धव्या आड, आनी एक काळ्या आड.

सासचेर टिपा

Sass प्रोग्रामेटिक रितीन व्हेरिएबल तयार करूंक शकना, देखून आमी स्वता दरेक टिंट आनी शेडा खातीर व्हेरिएबल हाताळणी तयार केले. आमी मध्यबिंदू मोल निर्देशीत करतात (देखीक, $blue-500) आनी Sass च्या रंग कार्या वरवीं आमच्या रंगांक टिंट (हळदुवो) वा सावळी (काळो) करपाक सानुकूल रंग कार्यां वापरतात mix().

वापरप mix()हें lighten()आनी सारकें न्हय darken()—पयलो निर्दिश्ट रंग धव्या वा काळ्या रंगांत भरसता, जाल्यार दुसरो फकत दर एका रंगाचें हळुवारपण मोल समायोजीत करता. परिणाम म्हळ्यार रंगांचो एक खूप चड पुराय संच, जशें ह्या CodePen डेमोंत दाखयलां .

आमचे tint-color()आनी shade-color()फंक्शन्स mix()आमच्या व्हेरिएबलाच्या बरोबर वापरतात $theme-color-interval, जे आमी तयार करतात त्या दर एका मिश्र रंगाखातीर स्टेप्ड टक्केवारी मोल निर्दिश्ट करता. पुराय स्त्रोत कोडाखातीर scss/_functions.scssआनी फायली पळयात .scss/_variables.scss

रंगीत सास नकाशे

Bootstrap च्या स्रोत Sass फायलींनी तीन नकाशे आसपावीत केल्यात जे तुमकां रंगांची वळेरी आनी तांचीं हेक्स मोलां बेगीन आनी सहजपणान लूप करपाक मदत करतात.

• $colorsआमच्या सगळ्या उपलब्ध बेस ( 500) रंगांची वळेरी दिता
• $theme-colorsसगळ्या अर्थान नांव दिल्ल्या थीम रंगांची वळेरी दिता (सकयल दाखयल्या)
• $graysकरड्या रंगाच्या सगळ्या रंगांची आनी शेड्सांची वळेरी दिता

भितर scss/_variables.scss, तुमकां Bootstrap च्या रंग चडांत चड आनी Sass नकासो मेळटलो. $colorsसास नकाशाचें एक उदाहरण पळयात :

$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
);

हेर जायत्या घटकांनी तीं कशीं वापरतात तें अद्ययावत करपाक नकाशा भितर मोलां जोडचीं, काडून उडोवचीं वा बदलचीं. दुर्दैवान ह्या वेळार, दरेक घटक ह्या सॅस नकाशाचो वापर करिना. फुडले अद्ययावत हाचेर सुदारणा करपाचो यत्न करतले. ते मेरेन, ${color}चड-उणें आनी ह्या सॅस नकाशाचो वापर करपाची येवजण करात.

उदारण

तुमच्या सॅसांत तुमी हीं कशीं वापरूं येतात तें पळयात:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

रंग मोलां सेट करपाखातीर आनी वापरपाखातीर रंग आनी पार्श्वभूंय उपयुक्तताय वर्गय उपलब्ध आसात .colorbackground-color500