ಸಾಸ್

ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ವೇಗವಾಗಿ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಲು ಅಸ್ಥಿರಗಳು, ನಕ್ಷೆಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಕಾರ್ಯಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು ನಮ್ಮ ಮೂಲ ಸಾಸ್ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಿ.

ಈ ಪುಟದಲ್ಲಿ

ವೇರಿಯೇಬಲ್‌ಗಳು, ನಕ್ಷೆಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು ನಮ್ಮ ಮೂಲ Sass ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಿ.

ಫೈಲ್ ರಚನೆ

ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕೋರ್ ಫೈಲ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಸಾಸ್‌ಗಾಗಿ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ರಚಿಸುವುದು ಎಂದರ್ಥ ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ಮಾರ್ಪಡಿಸಬಹುದು ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದು. ನೀವು npm ನಂತಹ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂದು ಭಾವಿಸಿದರೆ, ನೀವು ಈ ರೀತಿ ಕಾಣುವ ಫೈಲ್ ರಚನೆಯನ್ನು ಹೊಂದಿರುತ್ತೀರಿ:

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

ನೀವು ನಮ್ಮ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿದ್ದರೆ ಮತ್ತು ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಬಳಸದೇ ಇದ್ದರೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ನಿಮ್ಮದೇ ಆದ ರೀತಿಯಲ್ಲಿ ಪ್ರತ್ಯೇಕವಾಗಿರಿಸಿ, ಆ ರಚನೆಯಂತೆಯೇ ಏನನ್ನಾದರೂ ಹಸ್ತಚಾಲಿತವಾಗಿ ರಚಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ.

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

ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತಿದೆ

ನಿಮ್ಮ custom.scss, ನೀವು Bootstrap ನ ಮೂಲ Sass ಫೈಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತೀರಿ. ನಿಮಗೆ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ: ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸೇರಿಸಿ, ಅಥವಾ ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಭಾಗಗಳನ್ನು ಆರಿಸಿ. ನಾವು ಎರಡನೆಯದನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ, ಆದರೂ ನಮ್ಮ ಘಟಕಗಳಾದ್ಯಂತ ಕೆಲವು ಅವಶ್ಯಕತೆಗಳು ಮತ್ತು ಅವಲಂಬನೆಗಳಿವೆ ಎಂದು ತಿಳಿದಿರಲಿ. ನಮ್ಮ ಪ್ಲಗಿನ್‌ಗಳಿಗಾಗಿ ನೀವು ಕೆಲವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸಹ ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ.

// 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ನಿಮ್ಮ ಆರಂಭಿಕ ಹಂತವಾಗಿ ನಮ್ಮ ಫೈಲ್‌ನಿಂದ ಪೂರ್ಣ ಆಮದು ಸ್ಟಾಕ್ ಅನ್ನು ಬಳಸಲು ನಾವು ಸಲಹೆ ನೀಡುತ್ತೇವೆ .

ವೇರಿಯಬಲ್ ಡಿಫಾಲ್ಟ್‌ಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಸಾಸ್ ವೇರಿಯೇಬಲ್ !defaultಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಮಾರ್ಪಡಿಸದೆಯೇ ನಿಮ್ಮ ಸ್ವಂತ ಸಾಸ್‌ನಲ್ಲಿ ವೇರಿಯೇಬಲ್‌ನ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಅತಿಕ್ರಮಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಅಗತ್ಯವಿರುವಂತೆ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನಕಲಿಸಿ ಮತ್ತು ಅಂಟಿಸಿ, ಅವುಗಳ ಮೌಲ್ಯಗಳನ್ನು ಮಾರ್ಪಡಿಸಿ ಮತ್ತು !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 ಮೂಲಕ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ! ನಿಮ್ಮ ಸ್ವಂತ npm ಯೋಜನೆಯಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ನೋಡಲು twbs/bootstrap-npm-starter ಟೆಂಪ್ಲೇಟ್ ರೆಪೊಸಿಟರಿಗೆ ಹೋಗಿ . ಸಾಸ್ ಕಂಪೈಲರ್, ಆಟೋಪ್ರಿಫಿಕ್ಸರ್, ಸ್ಟೈಲಿಂಟ್, ಪರ್ಜ್‌ಸಿಎಸ್‌ಎಸ್ ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಐಕಾನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ನಕ್ಷೆಗಳು ಮತ್ತು ಕುಣಿಕೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಪ್ರಮುಖ ಮೌಲ್ಯದ ಜೋಡಿಗಳು ಸಂಬಂಧಿತ CSS ನ ಕುಟುಂಬಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ನಮ್ಮ ಬಣ್ಣಗಳು, ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ನಾವು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. ಸಾಸ್ ವೇರಿಯಬಲ್‌ಗಳಂತೆಯೇ, ಎಲ್ಲಾ ಸಾಸ್ ನಕ್ಷೆಗಳು !defaultಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ ಮತ್ತು ಅದನ್ನು ಅತಿಕ್ರಮಿಸಬಹುದು ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದು.

ನಮ್ಮ ಕೆಲವು ಸಾಸ್ ನಕ್ಷೆಗಳನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ಖಾಲಿಯಾಗಿ ವಿಲೀನಗೊಳಿಸಲಾಗಿದೆ. ಕೊಟ್ಟಿರುವ ಸಾಸ್ ನಕ್ಷೆಯ ಸುಲಭ ವಿಸ್ತರಣೆಯನ್ನು ಅನುಮತಿಸಲು ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ, ಆದರೆ ನಕ್ಷೆಯಿಂದ ಐಟಂಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ವೆಚ್ಚದಲ್ಲಿ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಕಷ್ಟವಾಗುತ್ತದೆ.

ನಕ್ಷೆಯನ್ನು ಮಾರ್ಪಡಿಸಿ

ನಕ್ಷೆಯಲ್ಲಿನ ಎಲ್ಲಾ ಅಸ್ಥಿರಗಳನ್ನು $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

ಅಗತ್ಯವಿರುವ ಕೀಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸಾಸ್ ನಕ್ಷೆಗಳಲ್ಲಿ ಕೆಲವು ನಿರ್ದಿಷ್ಟ ಕೀಗಳ ಉಪಸ್ಥಿತಿಯನ್ನು ನಾವು ಬಳಸುತ್ತೇವೆ ಮತ್ತು ಅವುಗಳನ್ನು ನಾವೇ ವಿಸ್ತರಿಸುತ್ತೇವೆ ಎಂದು ಊಹಿಸುತ್ತದೆ. ನೀವು ಒಳಗೊಂಡಿರುವ ನಕ್ಷೆಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದಂತೆ, ನಿರ್ದಿಷ್ಟ ಸಾಸ್ ನಕ್ಷೆಯ ಕೀಲಿಯನ್ನು ಬಳಸುತ್ತಿರುವಲ್ಲಿ ನೀವು ದೋಷಗಳನ್ನು ಎದುರಿಸಬಹುದು.

ಉದಾಹರಣೆಗೆ, ಲಿಂಕ್‌ಗಳು, ಬಟನ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ನಾವು primary, success, ಮತ್ತು dangerಕೀಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. $theme-colorsಈ ಕೀಲಿಗಳ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಾಯಿಸುವುದರಿಂದ ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಬಾರದು, ಆದರೆ ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು ಸಾಸ್ ಸಂಕಲನ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಈ ನಿದರ್ಶನಗಳಲ್ಲಿ, ಆ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಸಾಸ್ ಕೋಡ್ ಅನ್ನು ನೀವು ಮಾರ್ಪಡಿಸುವ ಅಗತ್ಯವಿದೆ.

ಕಾರ್ಯಗಳು

ಬಣ್ಣಗಳು

ನಾವು ಹೊಂದಿರುವ ಸಾಸ್ ನಕ್ಷೆಗಳ ಪಕ್ಕದಲ್ಲಿ , ಥೀಮ್ ಬಣ್ಣಗಳನ್ನು ಸ್ವತಂತ್ರ ಅಸ್ಥಿರಗಳಾಗಿಯೂ ಬಳಸಬಹುದು, ಉದಾಹರಣೆಗೆ $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
  }
}