சாஸ்

உங்கள் திட்டத்தை விரைவாக உருவாக்கவும் தனிப்பயனாக்கவும் உதவும் மாறிகள், வரைபடங்கள், மிக்ஸின்கள் மற்றும் செயல்பாடுகளைப் பயன்படுத்திக் கொள்ள எங்கள் மூல 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

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

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

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

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

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

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

// Required
@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/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

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

எங்கள் ஸ்டார்டர் திட்டத்துடன் npm வழியாக பூட்ஸ்டார்ப்புடன் தொடங்கவும்! twbs /bootstrap-npm-starter டெம்ப்ளேட் களஞ்சியத்திற்குச் சென்று உங்கள் சொந்த npm திட்டத்தில் பூட்ஸ்டார்ப்பை எவ்வாறு உருவாக்குவது மற்றும் தனிப்பயனாக்குவது என்பதைப் பார்க்கவும். Sass compiler, Autoprefixer, Stylelint, PurgeCSS மற்றும் Bootstrap ஐகான்கள் ஆகியவை அடங்கும்.

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

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

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

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

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

$primary: #0074d9;
$danger: #ff4136;

பின்னர், இந்த மாறிகள் பூட்ஸ்டார்ப்பின் $theme-colorsவரைபடத்தில் அமைக்கப்பட்டுள்ளன:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

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

$theme-colorsஉங்கள் தனிப்பயன் மதிப்புகளுடன் புதிய Sass வரைபடத்தை உருவாக்கி அசல் வரைபடத்துடன் இணைப்பதன் மூலம் புதிய வண்ணங்களை அல்லது வேறு ஏதேனும் வரைபடத்தைச் சேர்க்கவும் . இந்த வழக்கில், நாங்கள் ஒரு புதிய $custom-colorsவரைபடத்தை உருவாக்கி அதை உடன் இணைப்போம் $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

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

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

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

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

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

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

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

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

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

வண்ணங்கள்

எங்களிடம் உள்ள சாஸ் வரைபடங்களுக்கு அடுத்ததாக , தீம் வண்ணங்களை தனித்தனி மாறிகளாகவும் பயன்படுத்தலாம் $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()பூட்ஸ்டார்ப் மற்றும் shade-color()செயல்பாடுகள் மூலம் வண்ணங்களை ஒளிரச் செய்யலாம் அல்லது கருமையாக்கலாம் . இந்த செயல்பாடுகள் கருப்பு அல்லது வெள்ளை நிறத்துடன் வண்ணங்களை கலக்கும், சாஸின் சொந்த lighten()மற்றும் darken()செயல்பாடுகளைப் போலல்லாமல், இது ஒரு நிலையான அளவு லேசான தன்மையை மாற்றும், இது பெரும்பாலும் விரும்பிய விளைவை ஏற்படுத்தாது.

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

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

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

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

வலை உள்ளடக்க அணுகல் வழிகாட்டுதல்கள் (WCAG) மாறுபாடு தேவைகளைப் பூர்த்தி செய்வதற்காக, ஆசிரியர்கள் குறைந்தபட்ச உரை வண்ண மாறுபாடு 4.5:1 மற்றும் குறைந்தபட்ச உரை அல்லாத வண்ண மாறுபாடு 3:1 ஆகியவற்றை மிகக் குறைவான விதிவிலக்குகளுடன் வழங்க வேண்டும்.

இதற்கு உதவ, color-contrastபூட்ஸ்டார்ப்பில் செயல்பாட்டைச் சேர்த்துள்ளோம். குறிப்பிட்ட அடிப்படை நிறத்தின் அடிப்படையில் ஒரு ஒளி ( ), இருண்ட ( ) அல்லது கருப்பு ( ) மாறுபாடு வண்ணத்தை தானாகத் திரும்பப் பெற, வண்ண இடத்தில் ஒப்பீட்டு ஒளிர்வின் அடிப்படையில் மாறுபாடு வரம்புகளைக் கணக்கிடுவதற்கு WCAG கான்ட்ராஸ்ட் ரேஷியோ அல்காரிதத்தைப் பயன்படுத்துகிறது . நீங்கள் பல வகுப்புகளை உருவாக்கும் மிக்சின்கள் அல்லது லூப்களுக்கு இந்தச் செயல்பாடு மிகவும் பயனுள்ளதாக இருக்கும்.sRGB#fff#212529#000

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

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

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

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

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

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

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

SVG பின்னணிப் படங்களுக்கு , மற்றும் எழுத்துக்களில் escape-svgஇருந்து தப்பிக்க செயல்பாட்டைப் பயன்படுத்துகிறோம் . செயல்பாட்டைப் பயன்படுத்தும் போது , தரவு 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);
}

கலவைகள்

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

வண்ண திட்டங்கள்

மீடியா வினவிற்கான சுருக்கெழுத்து கலவை , , மற்றும் தனிப்பயன் வண்ணத் திட்டங்களுக்கான prefers-color-schemeஆதரவுடன் கிடைக்கிறது .lightdark

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}