वर्णं
Bootstrap एकेन विस्तृतेन वर्णप्रणाल्या समर्थितः अस्ति यत् अस्माकं शैल्याः घटकान् च विषयीकृत्य स्थापयति । एतेन कस्यापि परियोजनायाः कृते अधिकं व्यापकं अनुकूलनं विस्तारं च सक्षमं भवति ।
विषयवर्णाः
वयं सर्वेषां वर्णानाम् उपसमूहस्य उपयोगं कुर्मः यत् वर्णयोजनानि जनयितुं लघुतरं वर्णपैलेट् निर्मातुं शक्नुमः, यत् 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,
"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;
}
वर्णमूल्यानां सेट् कर्तुं , उपयोगाय च वर्णः , पृष्ठभूमिः च उपयोगितावर्गाः अपि उपलभ्यन्ते ।color
background-color
500