தீமிங் பூட்ஸ்டார்ப்

எளிதான தீமிங் மற்றும் கூறு மாற்றங்களுக்காக உலகளாவிய பாணி விருப்பத்தேர்வுகளுக்காக எங்களின் புதிய உள்ளமைக்கப்பட்ட சாஸ் மாறிகள் மூலம் பூட்ஸ்டார்ப் 4 ஐத் தனிப்பயனாக்குங்கள்.

அறிமுகம்

பூட்ஸ்டார்ப் 3 இல், தீமிங் பெரும்பாலும் குறைவான மாறுதல்கள், தனிப்பயன் CSS மற்றும் எங்கள் distகோப்புகளில் நாங்கள் சேர்த்த ஒரு தனி தீம் ஸ்டைல்ஷீட் ஆகியவற்றால் இயக்கப்படுகிறது. சில முயற்சிகள் மூலம், முக்கிய கோப்புகளைத் தொடாமல் பூட்ஸ்டார்ப் 3 இன் தோற்றத்தை முழுமையாக மறுவடிவமைப்பு செய்யலாம். பூட்ஸ்டார்ப் 4 ஒரு பழக்கமான, ஆனால் சற்று வித்தியாசமான அணுகுமுறையை வழங்குகிறது.

இப்போது, ​​சாஸ் மாறிகள், சாஸ் வரைபடங்கள் மற்றும் தனிப்பயன் CSS மூலம் தீமிங் நிறைவேற்றப்படுகிறது. மேலும் அர்ப்பணிக்கப்பட்ட தீம் நடை தாள் இல்லை; அதற்கு பதிலாக, சாய்வுகள், நிழல்கள் மற்றும் பலவற்றைச் சேர்க்க நீங்கள் உள்ளமைக்கப்பட்ட தீமை இயக்கலாம்.

சாஸ்

உங்கள் சொந்த சொத்து பைப்லைனைப் பயன்படுத்தி Sass ஐ தொகுக்கும்போது மாறிகள், வரைபடங்கள், மிக்சின்கள் மற்றும் பலவற்றைப் பயன்படுத்திக் கொள்ள எங்கள் மூல Sass கோப்புகளைப் பயன்படுத்தவும்.

கோப்பு அமைப்பு

முடிந்தவரை, பூட்ஸ்டார்ப்பின் முக்கிய கோப்புகளை மாற்றுவதைத் தவிர்க்கவும். சாஸைப் பொறுத்தவரை, பூட்ஸ்டார்ப்பை இறக்குமதி செய்யும் உங்கள் சொந்த ஸ்டைல்ஷீட்டை உருவாக்குவதன் மூலம் அதை நீங்கள் மாற்றியமைத்து நீட்டிக்க முடியும். நீங்கள் npm போன்ற தொகுப்பு மேலாளரைப் பயன்படுத்துகிறீர்கள் என்று வைத்துக் கொண்டால், இது போன்ற ஒரு கோப்பு அமைப்பு உங்களிடம் இருக்கும்:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

நீங்கள் எங்கள் மூலக் கோப்புகளைப் பதிவிறக்கம் செய்து, தொகுப்பு மேலாளரைப் பயன்படுத்தவில்லை எனில், பூட்ஸ்டார்ப்பின் மூலக் கோப்புகளை உங்களின் சொந்தக் கோப்புகளிலிருந்து தனித்தனியாக வைத்து, அந்த அமைப்பைப் போன்ற ஒன்றை கைமுறையாக அமைக்க வேண்டும்.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

இறக்குமதி செய்கிறது

உங்கள் இல் custom.scss, நீங்கள் பூட்ஸ்டார்ப்பின் மூல சாஸ் கோப்புகளை இறக்குமதி செய்வீர்கள். உங்களுக்கு இரண்டு விருப்பங்கள் உள்ளன: பூட்ஸ்டார்ப் அனைத்தையும் சேர்க்கவும் அல்லது உங்களுக்குத் தேவையான பகுதிகளைத் தேர்ந்தெடுக்கவும். பிந்தையதை நாங்கள் ஊக்குவிக்கிறோம், இருப்பினும் எங்கள் கூறுகள் முழுவதும் சில தேவைகள் மற்றும் சார்புகள் உள்ளன. எங்கள் செருகுநிரல்களுக்கு நீங்கள் சில ஜாவாஸ்கிரிப்ட்களையும் சேர்க்க வேண்டும்.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

அந்த அமைப்பில், உங்கள் சாஸ் மாறிகள் மற்றும் வரைபடங்களில் ஏதேனும் ஒன்றை நீங்கள் மாற்றத் தொடங்கலாம் custom.scss. // Optionalதேவைக்கேற்ப பிரிவின் கீழ் பூட்ஸ்டார்ப்பின் பகுதிகளைச் சேர்க்கத் தொடங்கலாம் . bootstrap.scssஉங்கள் தொடக்கப் புள்ளியாக எங்கள் கோப்பிலிருந்து முழு இறக்குமதி அடுக்கைப் பயன்படுத்த பரிந்துரைக்கிறோம் .

மாறி இயல்புநிலைகள்

பூட்ஸ்டார்ப்பில் உள்ள ஒவ்வொரு Sass மாறியும், !defaultBootstrap இன் மூலக் குறியீட்டை மாற்றாமல் உங்கள் சொந்த Sass இல் மாறியின் இயல்புநிலை மதிப்பை மேலெழுத அனுமதிக்கும் கொடியை உள்ளடக்கியது. தேவைக்கேற்ப மாறிகளை நகலெடுத்து ஒட்டவும், அவற்றின் மதிப்புகளை மாற்றவும் மற்றும் !defaultகொடியை அகற்றவும். ஒரு மாறி ஏற்கனவே ஒதுக்கப்பட்டிருந்தால், பூட்ஸ்டார்ப்பில் உள்ள இயல்புநிலை மதிப்புகளால் அது மீண்டும் ஒதுக்கப்படாது.

பூட்ஸ்டார்ப்பின் மாறிகளின் முழுமையான பட்டியலை நீங்கள் இல் காணலாம் scss/_variables.scss. சில மாறிகள் க்கு அமைக்கப்பட்டுள்ளன null, இந்த மாறிகள் உங்கள் உள்ளமைவில் மேலெழுதப்படும் வரை சொத்தை வெளியிடாது.

எங்கள் செயல்பாடுகள், மாறிகள் மற்றும் மிக்சின்கள் இறக்குமதி செய்யப்பட்ட பிறகு, மற்ற இறக்குமதிகளுக்கு முன் மாறி மேலெழுதப்பட வேண்டும்.

npm வழியாக பூட்ஸ்டார்ப்பை இறக்குமதி செய்து தொகுக்கும் போது background-colorமாற்றும் colorஒரு எடுத்துக்காட்டு இங்கே :<body>

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

கீழே உள்ள உலகளாவிய விருப்பங்கள் உட்பட, பூட்ஸ்டார்ப்பில் உள்ள எந்த மாறிக்கும் தேவையானதை மீண்டும் செய்யவும்.

வரைபடங்கள் மற்றும் சுழல்கள்

பூட்ஸ்டார்ப் 4 இல் ஒரு சில சாஸ் வரைபடங்கள் உள்ளன, முக்கிய மதிப்பு ஜோடிகள் தொடர்புடைய CSS குடும்பங்களை உருவாக்குவதை எளிதாக்குகிறது. எங்கள் வண்ணங்கள், கட்ட முறிவு புள்ளிகள் மற்றும் பலவற்றிற்கு சாஸ் வரைபடங்களைப் பயன்படுத்துகிறோம். Sass மாறிகளைப் போலவே, அனைத்து Sass வரைபடங்களும் !defaultகொடியை உள்ளடக்கியது மற்றும் மேலெழுதப்பட்டு நீட்டிக்கப்படலாம்.

எங்களின் சில Sass வரைபடங்கள் இயல்பாகவே காலியாக இணைக்கப்பட்டுள்ளன. கொடுக்கப்பட்ட சாஸ் வரைபடத்தை எளிதாக விரிவாக்க அனுமதிக்க இது செய்யப்படுகிறது, ஆனால் ஒரு வரைபடத்தில் இருந்து உருப்படிகளை அகற்றுவது சற்று கடினமாக இருக்கும்.

வரைபடத்தை மாற்றவும்

எங்கள் வரைபடத்தில் இருக்கும் நிறத்தை மாற்ற $theme-colors, பின்வருவனவற்றை உங்கள் தனிப்பயன் சாஸ் கோப்பில் சேர்க்கவும்:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

வரைபடத்தில் சேர்க்கவும்

க்கு புதிய வண்ணத்தைச் $theme-colorsசேர்க்க, புதிய விசையையும் மதிப்பையும் சேர்க்கவும்:

$theme-colors: (
  "custom-color": #900
);

வரைபடத்திலிருந்து அகற்று

இலிருந்து வண்ணங்களை அகற்ற $theme-colors, அல்லது வேறு ஏதேனும் வரைபடத்தைப் பயன்படுத்தவும் map-remove. எங்கள் தேவைகள் மற்றும் விருப்பங்களுக்கு இடையில் நீங்கள் அதைச் செருக வேண்டும் என்பதை நினைவில் கொள்ளவும்:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

தேவையான விசைகள்

சாஸ் வரைபடங்களில் சில குறிப்பிட்ட விசைகள் இருப்பதை பூட்ஸ்ட்ராப் கருதுகிறது. சேர்க்கப்பட்ட வரைபடங்களை நீங்கள் தனிப்பயனாக்கும்போது, ​​குறிப்பிட்ட Sass வரைபடத்தின் விசை பயன்படுத்தப்படும் இடத்தில் நீங்கள் பிழைகளை சந்திக்க நேரிடலாம்.

எடுத்துக்காட்டாக, இணைப்புகள், பொத்தான்கள் மற்றும் படிவ நிலைகளுக்கு primary, success, மற்றும் dangerவிசைகளைப் பயன்படுத்துகிறோம். $theme-colorsஇந்த விசைகளின் மதிப்புகளை மாற்றுவது எந்தச் சிக்கலையும் ஏற்படுத்தக்கூடாது, ஆனால் அவற்றை அகற்றுவது Sass தொகுப்பில் சிக்கல்களை ஏற்படுத்தலாம். இந்த நிகழ்வுகளில், அந்த மதிப்புகளைப் பயன்படுத்தும் சாஸ் குறியீட்டை நீங்கள் மாற்ற வேண்டும்.

செயல்பாடுகள்

பூட்ஸ்டார்ப் பல Sass செயல்பாடுகளைப் பயன்படுத்துகிறது, ஆனால் பொதுவான தீமிங்கிற்கு ஒரு துணைக்குழு மட்டுமே பொருந்தும். வண்ண வரைபடங்களிலிருந்து மதிப்புகளைப் பெறுவதற்கு மூன்று செயல்பாடுகளைச் சேர்த்துள்ளோம்:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

V3 இலிருந்து ஒரு வண்ண மாறியைப் பயன்படுத்துவதைப் போலவே, சாஸ் வரைபடத்திலிருந்து ஒரு வண்ணத்தைத் தேர்ந்தெடுக்க இவை உங்களை அனுமதிக்கின்றன.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

வரைபடத்திலிருந்து ஒரு குறிப்பிட்ட அளவிலான வண்ணத்தைப் பெறுவதற்கான மற்றொரு செயல்பாடும் எங்களிடம் உள்ளது. $theme-colorsஎதிர்மறை நிலை மதிப்புகள் நிறத்தை ஒளிரச் செய்யும், அதே நேரத்தில் அதிக அளவுகள் கருமையாக்கும்.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

நடைமுறையில், நீங்கள் செயல்பாட்டை அழைத்து இரண்டு அளவுருக்களில் அனுப்புவீர்கள்: நிறத்தின் பெயர் $theme-colors(எ.கா. முதன்மை அல்லது ஆபத்து) மற்றும் எண் நிலை.

.custom-element {
  color: theme-color-level(primary, -10);
}

எதிர்காலத்தில் கூடுதல் செயல்பாடுகளைச் சேர்க்கலாம் அல்லது கூடுதல் சாஸ் வரைபடங்களுக்கான நிலை செயல்பாடுகளை உருவாக்க உங்கள் சொந்த தனிப்பயன் சாஸ் சேர்க்கப்படலாம், அல்லது நீங்கள் இன்னும் வாய்மொழியாக இருக்க விரும்பினால் பொதுவான ஒன்றைக் கூட செய்யலாம்.

வண்ண வேறுபாடு

பூட்ஸ்டார்ப்பில் நாம் சேர்க்கும் கூடுதல் செயல்பாடு வண்ண மாறுபாடு செயல்பாடு, color-yiq. குறிப்பிட்ட அடிப்படை நிறத்தின் அடிப்படையில் ஒரு ஒளி ( ) அல்லது இருண்ட ( ) மாறுபாடு வண்ணத்தை தானாகத் திரும்ப இது YIQ வண்ண இடத்தைப் பயன்படுத்துகிறது. நீங்கள் பல வகுப்புகளை உருவாக்கும் மிக்சின்கள் அல்லது லூப்களுக்கு இந்தச் செயல்பாடு மிகவும் பயனுள்ளதாக இருக்கும்.#fff#111

எடுத்துக்காட்டாக, எங்கள் $theme-colorsவரைபடத்திலிருந்து வண்ண ஸ்வாட்ச்களை உருவாக்க:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

இது ஒரு-ஆஃப் கான்ட்ராஸ்ட் தேவைகளுக்கும் பயன்படுத்தப்படலாம்:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

எங்கள் வண்ண வரைபட செயல்பாடுகளுடன் அடிப்படை நிறத்தையும் நீங்கள் குறிப்பிடலாம்:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

எஸ்கேப் எஸ்.வி.ஜி

SVG பின்னணிப் படங்களுக்கு , மற்றும் எழுத்துக்களில் escape-svgஇருந்து தப்பிக்க செயல்பாட்டைப் பயன்படுத்துகிறோம் . IE இல் பின்னணிப் படங்களை ஒழுங்காக வழங்க, இந்த எழுத்துக்கள் தப்பிக்க வேண்டும். செயல்பாட்டைப் பயன்படுத்தும் போது , ​​தரவு URIகள் மேற்கோள் காட்டப்பட வேண்டும்.<>#escape-svg

செயல்பாடுகளைச் சேர்த்தல் மற்றும் கழித்தல்

CSS செயல்பாட்டை மடிக்க addமற்றும் செயல்பாடுகளைப் பயன்படுத்துகிறோம் . இந்த செயல்பாடுகளின் முதன்மை நோக்கம், "அலகு இல்லாத" மதிப்பு ஒரு வெளிப்பாட்டிற்கு அனுப்பப்படும் போது பிழைகளைத் தவிர்ப்பதாகும். போன்ற வெளிப்பாடுகள் கணித ரீதியாக சரியாக இருந்தாலும், எல்லா உலாவிகளிலும் பிழையை வழங்கும்.subtractcalc0calccalc(10px - 0)

கணக்கீடு செல்லுபடியாகும் உதாரணம்:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

கணக்கீடு தவறானது என்பதற்கான எடுத்துக்காட்டு:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

சாஸ் விருப்பங்கள்

எங்கள் உள்ளமைக்கப்பட்ட தனிப்பயன் மாறிகள் கோப்புடன் பூட்ஸ்டார்ப் 4 ஐத் தனிப்பயனாக்குங்கள் மற்றும் புதிய $enable-*சாஸ் மாறிகள் மூலம் உலகளாவிய CSS விருப்பங்களை எளிதாக மாற்றலாம். ஒரு மாறியின் மதிப்பை மேலெழுதவும் மற்றும் npm run testதேவைக்கேற்ப மீண்டும் தொகுக்கவும்.

scss/_variables.scssபூட்ஸ்டார்ப்பின் கோப்பில் முக்கிய உலகளாவிய விருப்பங்களுக்கு இந்த மாறிகளை நீங்கள் கண்டுபிடித்து தனிப்பயனாக்கலாம் .

நிறம்

பல பூட்ஸ்டார்ப்பின் பல்வேறு கூறுகள் மற்றும் பயன்பாடுகள் சாஸ் வரைபடத்தில் வரையறுக்கப்பட்ட வண்ணங்களின் தொடர் மூலம் கட்டமைக்கப்படுகின்றன. இந்த வரைபடத்தை Sass இல் லூப் செய்து, தொடர்ச்சியான விதிகளை விரைவாக உருவாக்கலாம்.

அனைத்து வண்ணங்கள்

பூட்ஸ்டார்ப் 4 இல் கிடைக்கும் அனைத்து வண்ணங்களும் சாஸ் மாறிகள் மற்றும் சாஸ் வரைபடமாக scss/_variables.scssகோப்பில் கிடைக்கும். நாங்கள் ஏற்கனவே சேர்த்துள்ள கிரேஸ்கேல் தட்டு போன்ற கூடுதல் நிழல்களைச் சேர்க்க, அடுத்தடுத்த சிறு வெளியீடுகளில் இது விரிவாக்கப்படும் .

உங்கள் சாஸில் இவற்றை எவ்வாறு பயன்படுத்தலாம் என்பது இங்கே:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

வண்ண பயன்பாட்டு வகுப்புகள் அமைப்பதற்கும் colorமற்றும் background-color.

தீம் வண்ணங்கள்

scss/_variables.scssபூட்ஸ்டார்ப்பின் கோப்பில் சாஸ் மாறிகள் மற்றும் சாஸ் வரைபடமாகவும் கிடைக்கும் வண்ணத் திட்டங்களை உருவாக்குவதற்கு சிறிய வண்ணத் தட்டுகளை உருவாக்க அனைத்து வண்ணங்களின் துணைக்குழுவைப் பயன்படுத்துகிறோம் .

சாம்பல் நிறங்கள்

சாம்பல் நிற மாறிகளின் விரிவான தொகுப்பு மற்றும் scss/_variables.scssஉங்கள் திட்டம் முழுவதும் நிலையான சாம்பல் நிற நிழல்களுக்கான சாஸ் வரைபடம். இவை "கூல் கிரேஸ்" என்பதை நினைவில் கொள்ளவும், இவை நடுநிலை சாம்பல் நிறத்தை விட நுட்பமான நீல நிற தொனியை நோக்கி செல்கின்றன.

க்குள் scss/_variables.scss, பூட்ஸ்டார்ப்பின் வண்ண மாறிகள் மற்றும் சாஸ் வரைபடத்தைக் காணலாம். $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
) !default;

பல கூறுகளில் அவை எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதைப் புதுப்பிக்க வரைபடத்தில் மதிப்புகளைச் சேர்க்கவும், அகற்றவும் அல்லது மாற்றவும். துரதிருஷ்டவசமாக இந்த நேரத்தில், ஒவ்வொரு கூறுகளும் இந்த சாஸ் வரைபடத்தைப் பயன்படுத்துவதில்லை. எதிர்கால புதுப்பிப்புகள் இதை மேம்படுத்த முயற்சிக்கும். அதுவரை, ${color}மாறிகள் மற்றும் இந்த சாஸ் வரைபடத்தைப் பயன்படுத்த திட்டமிடுங்கள்.

கூறுகள்

பூட்ஸ்டார்ப்பின் பல கூறுகள் மற்றும் பயன்பாடுகள் @eachசாஸ் வரைபடத்தின் மீது மீண்டும் செயல்படும் சுழல்களால் கட்டமைக்கப்பட்டுள்ளன. எங்களால் ஒரு கூறுகளின் $theme-colorsமாறுபாடுகளை உருவாக்குவதற்கும், ஒவ்வொரு பிரேக் பாயிண்டிற்கும் பதிலளிக்கக்கூடிய மாறுபாடுகளை உருவாக்குவதற்கும் இது குறிப்பாக உதவியாக இருக்கும். நீங்கள் இந்த Sass வரைபடங்களைத் தனிப்பயனாக்கி, மீண்டும் தொகுக்கும்போது, ​​இந்த சுழல்களில் உங்கள் மாற்றங்கள் தானாகவே பிரதிபலிக்கும்.

மாற்றியமைப்பவர்கள்

பூட்ஸ்டார்ப்பின் பல கூறுகள் அடிப்படை-மாற்றி வகுப்பு அணுகுமுறையுடன் கட்டமைக்கப்பட்டுள்ளன. இதன் பொருள் ஸ்டைலிங்கின் பெரும்பகுதி அடிப்படை வகுப்பில் உள்ளது (எ.கா., .btn) அதே நேரத்தில் பாணி மாறுபாடுகள் மாற்றியமைக்கும் வகுப்புகளுக்கு மட்டுமே (எ.கா., .btn-danger). $theme-colorsஎங்கள் மாற்றி வகுப்புகளின் எண்ணிக்கை மற்றும் பெயரைத் தனிப்பயனாக்க வரைபடத்தில் இருந்து இந்த மாற்றி வகுப்புகள் உருவாக்கப்பட்டுள்ளன .

கூறு மற்றும் எங்களின் அனைத்து பின்னணிப் பயன்பாடுகளுக்கு $theme-colorsமாற்றியமைப்பதற்காக வரைபடத்தின் மீது நாம் எவ்வாறு லூப் செய்கிறோம் என்பதற்கான இரண்டு எடுத்துக்காட்டுகள் இங்கே உள்ளன ..alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

பதிலளிக்கக்கூடியது

இந்த சாஸ் சுழல்கள் வண்ண வரைபடங்களுக்கு மட்டுப்படுத்தப்படவில்லை. உங்கள் கூறுகள் அல்லது பயன்பாடுகளின் பதிலளிக்கக்கூடிய மாறுபாடுகளையும் நீங்கள் உருவாக்கலாம். எடுத்துக்காட்டாக, எங்களின் பதிலளிக்கக்கூடிய உரை சீரமைப்புப் பயன்பாடுகளை எடுத்துக்கொள்வோம், அங்கு மீடியா வினவலுடன் சாஸ் வரைபடத்திற்கான @eachலூப்பைக் கலக்கிறோம்.$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

உங்கள் மாற்றங்களை நீங்கள் மாற்ற வேண்டும் என்றால் $grid-breakpoints, உங்கள் மாற்றங்கள் அந்த வரைபடத்தில் திரும்பும் அனைத்து சுழல்களுக்கும் பொருந்தும்.

CSS மாறிகள்

பூட்ஸ்டார்ப் 4 ஆனது அதன் தொகுக்கப்பட்ட CSS இல் சுமார் இரண்டு டஜன் CSS தனிப்பயன் பண்புகளை (மாறிகள்) உள்ளடக்கியது. உங்கள் உலாவியின் இன்ஸ்பெக்டர், குறியீடு சாண்ட்பாக்ஸ் அல்லது பொதுவான முன்மாதிரி ஆகியவற்றில் பணிபுரியும் போது, ​​எங்கள் தீம் வண்ணங்கள், பிரேக்பாயிண்ட்கள் மற்றும் முதன்மை எழுத்துரு அடுக்குகள் போன்ற பொதுவாகப் பயன்படுத்தப்படும் மதிப்புகளுக்கு இவை எளிதான அணுகலை வழங்குகின்றன.

கிடைக்கக்கூடிய மாறிகள்

இங்கே நாம் சேர்க்கும் மாறிகள் உள்ளன (அவை :rootதேவை என்பதை நினைவில் கொள்க). அவை எங்கள் _root.scssகோப்பில் உள்ளன.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

எடுத்துக்காட்டுகள்

CSS மாறிகள் Sass இன் மாறிகளுக்கு ஒத்த நெகிழ்வுத்தன்மையை வழங்குகின்றன, ஆனால் உலாவிக்கு வழங்குவதற்கு முன் தொகுக்க வேண்டிய அவசியமில்லை. எடுத்துக்காட்டாக, இங்கே நாங்கள் எங்கள் பக்கத்தின் எழுத்துரு மற்றும் இணைப்பு நடைகளை CSS மாறிகள் மூலம் மீட்டமைக்கிறோம்.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

பிரேக் பாயிண்ட் மாறிகள்

நாங்கள் முதலில் எங்கள் CSS மாறிகளில் (எ.கா., --breakpoint-md) பிரேக் பாயிண்ட்டைச் சேர்த்திருந்தாலும், இவை மீடியா வினவல்களில் ஆதரிக்கப்படாது , ஆனால் அவை மீடியா வினவல்களில் விதிமுறைகளுக்குள் பயன்படுத்தப்படலாம் . இந்த பிரேக்பாயிண்ட் மாறிகள் பின்தங்கிய இணக்கத்தன்மைக்காக தொகுக்கப்பட்ட CSS இல் இருக்கும், அவை ஜாவாஸ்கிரிப்ட் மூலம் பயன்படுத்தப்படலாம். விவரக்குறிப்பில் மேலும் அறிக .

எது ஆதரிக்கப்படவில்லை என்பதற்கான எடுத்துக்காட்டு இங்கே :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

ஆதரிக்கப்படுவதற்கு இங்கே ஒரு எடுத்துக்காட்டு :

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}