ਸੱਸ

ਵੇਰੀਏਬਲ, ਨਕਸ਼ੇ, ਮਿਸ਼ਰਣ, ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦਾ ਲਾਭ ਲੈਣ ਲਈ ਸਾਡੀਆਂ ਸਰੋਤ ਸਾਸ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲ ਸਕੇ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਵੇਰੀਏਬਲ, ਨਕਸ਼ੇ, ਮਿਕਸਿਨ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦਾ ਫਾਇਦਾ ਲੈਣ ਲਈ ਸਾਡੇ ਸਰੋਤ ਸਾਸ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਫਾਈਲ ਬਣਤਰ

ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਕੋਰ ਫਾਈਲਾਂ ਨੂੰ ਸੋਧਣ ਤੋਂ ਬਚੋ। ਸਾਸ ਲਈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡੀ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਬਣਾਉਣਾ ਜੋ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਸੋਧ ਅਤੇ ਵਧਾ ਸਕੋ। ਇਹ ਮੰਨ ਕੇ ਕਿ ਤੁਸੀਂ npm ਵਰਗੇ ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਫਾਈਲ ਬਣਤਰ ਹੋਵੇਗੀ ਜੋ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ:

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

ਜੇਕਰ ਤੁਸੀਂ ਸਾਡੀਆਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਡਾਉਨਲੋਡ ਕੀਤਾ ਹੈ ਅਤੇ ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਆਪਣੀ ਖੁਦ ਤੋਂ ਵੱਖ ਰੱਖਦੇ ਹੋਏ, ਉਸ ਢਾਂਚੇ ਦੇ ਸਮਾਨ ਕੁਝ ਦਸਤੀ ਬਣਾਉਣਾ ਚਾਹੋਗੇ।

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

ਆਯਾਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

ਤੁਹਾਡੇ ਵਿੱਚ custom.scss, ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ Sass ਫਾਈਲਾਂ ਨੂੰ ਆਯਾਤ ਕਰੋਗੇ। ਤੁਹਾਡੇ ਕੋਲ ਦੋ ਵਿਕਲਪ ਹਨ: ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ ਲੋੜੀਂਦੇ ਹਿੱਸੇ ਚੁਣੋ। ਅਸੀਂ ਬਾਅਦ ਵਾਲੇ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦੇ ਹਾਂ, ਹਾਲਾਂਕਿ ਧਿਆਨ ਰੱਖੋ ਕਿ ਸਾਡੇ ਹਿੱਸਿਆਂ ਵਿੱਚ ਕੁਝ ਲੋੜਾਂ ਅਤੇ ਨਿਰਭਰਤਾਵਾਂ ਹਨ। ਤੁਹਾਨੂੰ ਸਾਡੇ ਪਲੱਗਇਨਾਂ ਲਈ ਕੁਝ JavaScript ਵੀ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।

// 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

ਉਸ ਸੈੱਟਅੱਪ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੇ ਵਿੱਚ ਕਿਸੇ ਵੀ Sass ਵੇਰੀਏਬਲ ਅਤੇ ਨਕਸ਼ਿਆਂ ਨੂੰ ਸੋਧਣਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ custom.scss। // Optionalਤੁਸੀਂ ਲੋੜ ਅਨੁਸਾਰ ਸੈਕਸ਼ਨ ਦੇ ਤਹਿਤ ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਜੋੜਨਾ ਵੀ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ । bootstrap.scssਅਸੀਂ ਤੁਹਾਡੇ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਵਜੋਂ ਸਾਡੀ ਫਾਈਲ ਤੋਂ ਪੂਰੇ ਆਯਾਤ ਸਟੈਕ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦੇ ਹਾਂ ।

ਵੇਰੀਏਬਲ ਪੂਰਵ-ਨਿਰਧਾਰਤ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਹਰੇਕ Sass ਵੇਰੀਏਬਲ ਵਿੱਚ !defaultਫਲੈਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਸੋਧੇ ਬਿਨਾਂ ਤੁਹਾਡੇ ਆਪਣੇ 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 ਦੁਆਰਾ ਬੂਟਸਟਰੈਪ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰੋ! ਆਪਣੇ ਖੁਦ ਦੇ npm ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਹੈ ਇਹ ਦੇਖਣ ਲਈ twbs /bootstrap-npm-starter ਟੈਂਪਲੇਟ ਰਿਪੋਜ਼ਟਰੀ ਵੱਲ ਜਾਓ। Sass ਕੰਪਾਈਲਰ, ਆਟੋਪ੍ਰੀਫਿਕਸਰ, ਸਟਾਈਲਿੰਟ, ਪਰਜਸੀਐਸਐਸ, ਅਤੇ ਬੂਟਸਟਰੈਪ ਆਈਕਨ ਸ਼ਾਮਲ ਹਨ।

ਨਕਸ਼ੇ ਅਤੇ ਲੂਪਸ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਮੁੱਠੀ ਭਰ Sass ਨਕਸ਼ੇ, ਮੁੱਖ ਮੁੱਲ ਜੋੜੇ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜੋ ਸੰਬੰਧਿਤ CSS ਦੇ ਪਰਿਵਾਰਾਂ ਨੂੰ ਬਣਾਉਣਾ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਅਸੀਂ ਆਪਣੇ ਰੰਗਾਂ, ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟਸ, ਅਤੇ ਹੋਰ ਲਈ Sass ਨਕਸ਼ੇ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। Sass ਵੇਰੀਏਬਲ ਦੀ ਤਰ੍ਹਾਂ, ਸਾਰੇ Sass ਨਕਸ਼ਿਆਂ ਵਿੱਚ !defaultਫਲੈਗ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਅਤੇ ਓਵਰਰਾਈਡ ਅਤੇ ਵਧਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

ਸਾਡੇ ਕੁਝ ਸਾਸ ਨਕਸ਼ੇ ਮੂਲ ਰੂਪ ਵਿੱਚ ਖਾਲੀ ਨਕਸ਼ਿਆਂ ਵਿੱਚ ਮਿਲਾਏ ਜਾਂਦੇ ਹਨ। ਇਹ ਦਿੱਤੇ ਗਏ ਸਾਸ ਨਕਸ਼ੇ ਦੇ ਆਸਾਨ ਵਿਸਤਾਰ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਨਕਸ਼ੇ ਤੋਂ ਆਈਟਮਾਂ ਨੂੰ ਥੋੜਾ ਹੋਰ ਮੁਸ਼ਕਲ ਬਣਾਉਣ ਦੀ ਕੀਮਤ 'ਤੇ ਆਉਂਦਾ ਹੈ।

ਨਕਸ਼ਾ ਸੋਧੋ

ਨਕਸ਼ੇ ਵਿੱਚ ਸਾਰੇ ਵੇਰੀਏਬਲਾਂ $theme-colorsਨੂੰ ਇੱਕਲੇ ਵੇਰੀਏਬਲ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਸਾਡੇ $theme-colorsਨਕਸ਼ੇ ਵਿੱਚ ਇੱਕ ਮੌਜੂਦਾ ਰੰਗ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰਨ ਲਈ, ਆਪਣੀ ਕਸਟਮ Sass ਫਾਈਲ ਵਿੱਚ ਹੇਠ ਲਿਖਿਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ:

$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 ਕੰਪਾਇਲੇਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਸਥਿਤੀਆਂ ਵਿੱਚ, ਤੁਹਾਨੂੰ 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`
}

Escape SVG

ਅਸੀਂ SVG ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰਾਂ ਲਈ , ��ਤੇ ਅੱਖਰਾਂ escape-svgਤੋਂ ਬਚਣ ਲਈ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ , ਡੇਟਾ URIs ਦਾ ਹਵਾਲਾ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।<>#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
  }
}