वर्णं

विषयवर्णाः

वयं सर्वेषां वर्णानाम् उपसमूहस्य उपयोगं कुर्मः यत् वर्णयोजनानि जनयितुं लघुतरं वर्णपैलेट् निर्मातुं शक्नुमः, यत् Sass चररूपेण अपि उपलभ्यते तथा च Bootstrap इत्यस्य scss/_variables.scssसञ्चिकायां Sass map इति ।

एते सर्वे वर्णाः सास् मानचित्ररूपेण उपलभ्यन्ते, $theme-colors.

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

एतेषां वर्णानाम् परिवर्तनं कथं करणीयम् इति ज्ञातुं अस्माकं Sass maps and loops docs पश्यन्तु ।

सर्वे वर्णाः

सर्वे Bootstrap वर्णाः Sass चररूपेण तथा च scss/_variables.scssसञ्चिकायां Sass map इति उपलभ्यन्ते । सञ्चिकायाः ​​आकारस्य वर्धनं परिहरितुं वयं एतेषां प्रत्येकस्य चरस्य कृते text अथवा background color classes न निर्मामः । अपि तु, वयं theme palette कृते एतेषां वर्णानाम् उपसमूहं चिनोमः ।

यथा यथा भवन्तः वर्णानाम् अनुकूलनं कुर्वन्ति तथा विपरीततानुपातानाम् अवलोकनं अवश्यं कुर्वन्तु । यथा अधः दर्शितं, वयं प्रत्येकस्मिन् मुख्यवर्णे त्रीणि विपरीततानुपाताः योजितवन्तः-एकं स्वाच् वर्तमानवर्णानां कृते, एकं श्वेतस्य विरुद्धं, एकं कृष्णवर्णस्य विरुद्धम्

सस्स् पर टिप्पणियाँ

Sass प्रोग्रामेटिकरूपेण वेरियेबल् जनयितुं न शक्नोति, अतः वयं स्वयमेव प्रत्येकस्य टिण्ट् तथा शेड् इत्यस्य कृते वैरिएबल्स् मैन्युअल् रूपेण निर्मितवन्तः । वयं midpoint value (eg, $blue-500) निर्दिशामः तथा च Sass इत्यस्य color function इत्यस्य माध्यमेन अस्माकं colors tint (lighten) अथवा shade (darken) कर्तुं custom color functions इत्यस्य उपयोगं कुर्मः mix()।

प्रयोगः mix()न समानः lighten()तथा darken()—पूर्वः निर्दिष्टवर्णं श्वेतेन कृष्णेन वा मिश्रयति, उत्तरं तु केवलं प्रत्येकस्य वर्णस्य लघुतामूल्यं समायोजयति । परिणामः वर्णानाम् एकः बहु अधिकः सम्पूर्णः सूटः अस्ति, यथा अस्मिन् CodePen डेमो मध्ये दर्शितम् अस्ति ।

अस्माकं tint-color()तथा shade-color()कार्याणि mix()अस्माकं चरस्य पार्श्वे उपयुज्यन्ते $theme-color-interval, यत् वयं उत्पादितस्य प्रत्येकस्य मिश्रितवर्णस्य कृते एकं चरणबद्धं प्रतिशतमूल्यं निर्दिशति । scss/_functions.scssपूर्णस्रोतसङ्केतार्थं and scss/_variables.scssसञ्चिकाः पश्यन्तु ।

रंग Sass मानचित्र

Bootstrap इत्यस्य स्रोत Sass सञ्चिकासु त्रीणि मानचित्राणि सन्ति येन भवन्तः शीघ्रं सुलभतया च वर्णानाम् एकां सूचीं तेषां हेक्स मूल्यानि च लूप् कर्तुं साहाय्यं कुर्वन्ति ।

• $colorsअस्माकं सर्वेषां उपलब्धानां आधार ( 500) वर्णानाम् सूचीं करोति
• $theme-colorsसर्वान् शब्दार्थनामकविषयवर्णान् सूचीबद्धं करोति (अधः दर्शितम्) ।
• $graysधूसरस्य सर्वाणि टिन्ट्-छायानि च सूचीबद्धानि करोति

, इत्यस्य अन्तः scss/_variables.scssभवन्तः Bootstrap इत्यस्य color variables तथा Sass map इत्येतत् प्राप्नुवन्ति । $colorsअत्र सास् मानचित्रस्य उदाहरणम् अस्ति :

$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 map इत्यस्य उपयोगं कर्तुं योजनां कुर्वन्तु ।

उदाहरण

अत्र भवन्तः स्वस्य Sass मध्ये एतानि कथं उपयोक्तुं शक्नुवन्ति:

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

वर्णमूल्यानां सेट् कर्तुं उपयोगाय च वर्णः पृष्ठभूमिः च उपयोगितावर्गाः अपि उपलभ्यन्ते ।colorbackground-color500

उपयोगिताएं उत्पन्न करना

colorBootstrap प्रत्येकं वर्णचरस्य कृते उपयोगितानि च न समाविष्टानि background-color, परन्तु भवान् एतानि स्वयमेव अस्माकं उपयोगिता API इत्यनेन सह जनयितुं शक्नोति तथा च v5.1.0 इत्यस्मिन् योजितेन अस्माकं विस्तारितैः Sass मानचित्रैः सह।

1. आरम्भार्थं, सुनिश्चितं कुर्वन्तु यत् भवान् अस्माकं functions, variables, mixins, utilities च आयातितवान् ।
2. map-merge-multiple()नूतने मानचित्रे एकाधिकं Sass मानचित्रं शीघ्रं एकत्र विलीनीकरणाय अस्माकं कार्यस्य उपयोगं कुर्वन्तु ।
3. वर्गनाम्ना सह कस्यापि उपयोगितायाः विस्तारार्थं एतत् नूतनं संयुक्तं मानचित्रं विलीनं कुर्वन्तु {color}-{level}।

अत्र एकं उदाहरणं यत् .text-purple-500उपर्युक्तानि चरणानि उपयुज्य text color utilities (eg, ) जनयति ।

@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}प्रत्येकस्य वर्णस्य स्तरस्य च कृते नूतनानि उपयोगितानि उत्पद्यन्ते । अन्येषां उपयोगितायाः सम्पत्तिनां च कृते अपि तथैव कर्तुं शक्नुवन्ति ।