Source

ਥੀਮਿੰਗ ਬੂਟਸਟਰੈਪ

ਆਸਾਨ ਥੀਮਿੰਗ ਅਤੇ ਕੰਪੋਨੈਂਟ ਤਬਦੀਲੀਆਂ ਲਈ ਗਲੋਬਲ ਸਟਾਈਲ ਤਰਜੀਹਾਂ ਲਈ ਸਾਡੇ ਨਵੇਂ ਬਿਲਟ-ਇਨ ਸਾਸ ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਬੂਟਸਟਰੈਪ 4 ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।

ਜਾਣ-ਪਛਾਣ

ਬੂਟਸਟਰੈਪ 3 ਵਿੱਚ, ਥੀਮਿੰਗ ਨੂੰ ਜਿਆਦਾਤਰ ਘੱਟ, ਕਸਟਮ CSS, ਅਤੇ ਇੱਕ ਵੱਖਰੀ ਥੀਮ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਵੇਰੀਏਬਲ ਓਵਰਰਾਈਡਾਂ ਦੁਆਰਾ ਚਲਾਇਆ ਗਿਆ ਸੀ ਜੋ ਅਸੀਂ ਆਪਣੀਆਂ distਫਾਈਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ। ਕੁਝ ਕੋਸ਼ਿਸ਼ਾਂ ਨਾਲ, ਕੋਈ ਵੀ ਕੋਰ ਫਾਈਲਾਂ ਨੂੰ ਛੂਹਣ ਤੋਂ ਬਿਨਾਂ ਬੂਟਸਟਰੈਪ 3 ਦੀ ਦਿੱਖ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਦੁਬਾਰਾ ਡਿਜ਼ਾਈਨ ਕਰ ਸਕਦਾ ਹੈ। ਬੂਟਸਟਰੈਪ 4 ਇੱਕ ਜਾਣੂ, ਪਰ ਥੋੜ੍ਹਾ ਵੱਖਰਾ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਹੁਣ, ਥੀਮਿੰਗ Sass ਵੇਰੀਏਬਲ, Sass ਨਕਸ਼ੇ, ਅਤੇ ਕਸਟਮ CSS ਦੁਆਰਾ ਪੂਰੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇੱਥੇ ਕੋਈ ਹੋਰ ਸਮਰਪਿਤ ਥੀਮ ਸਟਾਈਲਸ਼ੀਟ ਨਹੀਂ ਹੈ; ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਗਰੇਡੀਐਂਟ, ਸ਼ੈਡੋ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਜੋੜਨ ਲਈ ਬਿਲਟ-ਇਨ ਥੀਮ ਨੂੰ ਸਮਰੱਥ ਕਰ ਸਕਦੇ ਹੋ।

ਸੱਸ

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

ਫਾਈਲ ਬਣਤਰ

ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਕੋਰ ਫਾਈਲਾਂ ਨੂੰ ਸੋਧਣ ਤੋਂ ਬਚੋ। ਸਾਸ ਲਈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡੀ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਬਣਾਉਣਾ ਜੋ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਸੋਧ ਅਤੇ ਵਧਾ ਸਕੋ। ਇਹ ਮੰਨ ਕੇ ਕਿ ਤੁਸੀਂ 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

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

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

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

// Optional
@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";

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

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

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

ਤੁਹਾਨੂੰ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੇ ਵੇਰੀਏਬਲਾਂ ਦੀ ਪੂਰੀ ਸੂਚੀ ਮਿਲੇਗੀ scss/_variables.scss।

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

ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ npm ਦੁਆਰਾ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਅਤੇ ਕੰਪਾਇਲ ਕਰਨ ਵੇਲੇ background-colorਅਤੇ colorਲਈ ਬਦਲਦੀ ਹੈ:<body>

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

ਹੇਠਲੇ ਗਲੋਬਲ ਵਿਕਲਪਾਂ ਸਮੇਤ, ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਿਸੇ ਵੀ ਵੇਰੀਏਬਲ ਲਈ ਲੋੜ ਅਨੁਸਾਰ ਦੁਹਰਾਓ।

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

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

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

ਨਕਸ਼ਾ ਸੋਧੋ

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

$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 ਕੋਡ ਨੂੰ ਸੋਧਣ ਦੀ ਲੋੜ ਪਵੇਗੀ ਜੋ ਉਹਨਾਂ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

ਫੰਕਸ਼ਨ

ਬੂਟਸਟਰੈਪ ਕਈ 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);
}

ਇਹ ਤੁਹਾਨੂੰ Sass ਨਕਸ਼ੇ ਤੋਂ ਇੱਕ ਰੰਗ ਚੁਣਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ 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);
}

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

ਰੰਗ ਵਿਪਰੀਤ

ਇੱਕ ਵਾਧੂ ਫੰਕਸ਼ਨ ਜੋ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ ਉਹ ਹੈ ਰੰਗ ਕੰਟਰਾਸਟ ਫੰਕਸ਼ਨ 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`
}

Sass ਵਿਕਲਪ

ਸਾਡੀ ਬਿਲਟ-ਇਨ ਕਸਟਮ ਵੇਰੀਏਬਲ ਫਾਈਲ ਨਾਲ ਬੂਟਸਟਰੈਪ 4 ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ਅਤੇ ਨਵੇਂ $enable-*Sass ਵੇਰੀਏਬਲਾਂ ਨਾਲ ਗਲੋਬਲ CSS ਤਰਜੀਹਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਟੌਗਲ ਕਰੋ। ਇੱਕ ਵੇਰੀਏਬਲ ਦੇ ਮੁੱਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ ਅਤੇ npm run testਲੋੜ ਅਨੁਸਾਰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰੋ।

scss/_variables.scssਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੀ ਫਾਈਲ ਵਿੱਚ ਮੁੱਖ ਗਲੋਬਲ ਵਿਕਲਪਾਂ ਲਈ ਇਹਨਾਂ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਲੱਭ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ ।

ਵੇਰੀਏਬਲ	ਮੁੱਲ	ਵਰਣਨ
`$spacer`	`1rem`(ਡਿਫੌਲਟ), ਜਾਂ ਕੋਈ ਮੁੱਲ > 0	ਸਾਡੀਆਂ ਸਪੇਸਰ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਪ੍ਰੋਗ੍ਰਾਮਮੈਟਿਕ ਤੌਰ 'ਤੇ ਬਣਾਉਣ ਲਈ ਡਿਫੌਲਟ ਸਪੇਸਰ ਮੁੱਲ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ।
`$enable-rounded`	`true`(ਡਿਫੌਲਟ) ਜਾਂ`false`	`border-radius`ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
`$enable-shadows`	`true`ਜਾਂ `false`(ਮੂਲ)	`box-shadow`ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
`$enable-gradients`	`true`ਜਾਂ `false`(ਮੂਲ)	`background-image`ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਸਟਾਈਲ ਰਾਹੀਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰੇਡੀਐਂਟ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
`$enable-transitions`	`true`(ਡਿਫੌਲਟ) ਜਾਂ`false`	`transition`ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ s ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
`$enable-hover-media-query`	`true`ਜਾਂ `false`(ਮੂਲ)	ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ
`$enable-grid-classes`	`true`(ਡਿਫੌਲਟ) ਜਾਂ`false`	ਗਰਿੱਡ ਸਿਸਟਮ (ਜਿਵੇਂ ਕਿ, `.container`, `.row`, `.col-md-1`, ਆਦਿ) ਲਈ CSS ਕਲਾਸਾਂ ਬਣਾਉਣ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
`$enable-caret`	`true`(ਡਿਫੌਲਟ) ਜਾਂ`false`	'ਤੇ ਸੂਡੋ ਐਲੀਮੈਂਟ ਕੈਰੇਟ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ `.dropdown-toggle`।
`$enable-print-styles`	`true`(ਡਿਫੌਲਟ) ਜਾਂ`false`	ਪ੍ਰਿੰਟਿੰਗ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।

ਰੰਗ

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

ਸਾਰੇ ਰੰਗ

ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਉਪਲਬਧ ਸਾਰੇ ਰੰਗ, Sass ਵੇਰੀਏਬਲ ਅਤੇ scss/_variables.scssਫਾਈਲ ਵਿੱਚ ਇੱਕ Sass ਨਕਸ਼ੇ ਵਜੋਂ ਉਪਲਬਧ ਹਨ। ਇਸ ਨੂੰ ਵਾਧੂ ਸ਼ੇਡਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਅਗਲੀਆਂ ਛੋਟੀਆਂ ਰੀਲੀਜ਼ਾਂ ਵਿੱਚ ਵਧਾਇਆ ਜਾਵੇਗਾ, ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਸ਼ਾਮਲ ਕੀਤੇ ਗ੍ਰੇਸਕੇਲ ਪੈਲੇਟ ਵਾਂਗ।

ਨੀਲਾ

ਇੰਡੀਗੋ

ਜਾਮਨੀ

ਗੁਲਾਬੀ

ਲਾਲ

ਸੰਤਰਾ

ਪੀਲਾ

ਹਰਾ

ਟੀਲ

ਸਿਆਨ

ਇੱਥੇ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਸਾਸ ਵਿੱਚ ਕਿਵੇਂ ਵਰਤ ਸਕਦੇ ਹੋ:

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

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

ਰੰਗ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਸੈਟਿੰਗਾਂ ਲਈ ਵੀ ਉਪਲਬਧ ਹਨ colorਅਤੇ background-color.

ਭਵਿੱਖ ਵਿੱਚ, ਅਸੀਂ ਹਰੇਕ ਰੰਗ ਦੇ ਸ਼ੇਡਾਂ ਲਈ Sass ਨਕਸ਼ੇ ਅਤੇ ਵੇਰੀਏਬਲ ਪ੍ਰਦਾਨ ਕਰਨ ਦਾ ਟੀਚਾ ਰੱਖਾਂਗੇ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਹੇਠਾਂ ਗ੍ਰੇਸਕੇਲ ਰੰਗਾਂ ਨਾਲ ਕੀਤਾ ਹੈ।

ਥੀਮ ਦੇ ਰੰਗ

scss/_variables.scssਅਸੀਂ ਰੰਗ ਸਕੀਮਾਂ ਬਣਾਉਣ ਲਈ ਇੱਕ ਛੋਟਾ ਰੰਗ ਪੈਲਅਟ ਬਣਾਉਣ ਲਈ ਸਾਰੇ ਰੰਗਾਂ ਦੇ ਇੱਕ ਸਬਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜੋ Sass ਵੇਰੀਏਬਲ ਅਤੇ ਬੂਟਸਟਰੈਪਸ ਦੀ ਫਾਈਲ ਵਿੱਚ ਇੱਕ Sass ਨਕਸ਼ੇ ਵਜੋਂ ਵੀ ਉਪਲਬਧ ਹੈ।

ਪ੍ਰਾਇਮਰੀ

ਸੈਕੰਡਰੀ

ਸਫਲਤਾ

ਖ਼ਤਰਾ

ਚੇਤਾਵਨੀ

ਜਾਣਕਾਰੀ

ਚਾਨਣ

ਹਨੇਰ

ਸਲੇਟੀ

ਸਲੇਟੀ ਵੇਰੀਏਬਲਾਂ ਦਾ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਸੈੱਟ ਅਤੇ scss/_variables.scssਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਲੇਟੀ ਦੇ ਇਕਸਾਰ ਸ਼ੇਡ ਲਈ ਇੱਕ Sass ਨਕਸ਼ਾ।

100

200

300

400

500

600

700

800

900

ਦੇ ਅੰਦਰ scss/_variables.scss, ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਦੇ ਰੰਗ ਵੇਰੀਏਬਲ ਅਤੇ Sass ਨਕਸ਼ਾ ਮਿਲੇਗਾ। ਇੱਥੇ $colorsSass ਨਕਸ਼ੇ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:

$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;

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

ਕੰਪੋਨੈਂਟਸ

ਬੂਟਸਟਰੈਪ ਦੇ ਬਹੁਤ ਸਾਰੇ ਹਿੱਸੇ ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ @eachਲੂਪਾਂ ਨਾਲ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ ਜੋ ਇੱਕ Sass ਨਕਸ਼ੇ ਉੱਤੇ ਦੁਹਰਾਉਂਦੀਆਂ ਹਨ। ਇਹ ਸਾਡੇ ਦੁਆਰਾ ਕਿਸੇ ਕੰਪੋਨੈਂਟ ਦੇ ਰੂਪਾਂ ਨੂੰ $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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ਉਦਾਹਰਨਾਂ

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

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

ਬ੍ਰੇਕਪੁਆਇੰਟ ਵੇਰੀਏਬਲ

ਜਦੋਂ ਕਿ ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਸਾਡੇ CSS ਵੇਰੀਏਬਲਾਂ ਵਿੱਚ ਬ੍ਰੇਕਪੁਆਇੰਟਸ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤਾ ਸੀ (ਉਦਾਹਰਨ ਲਈ, --breakpoint-md), ਇਹ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ , ਪਰ ਉਹਨਾਂ ਨੂੰ ਅਜੇ ਵੀ ਮੀਡੀਆ ਸਵਾਲਾਂ ਵਿੱਚ ਨਿਯਮਾਂ ਦੇ ਅੰਦਰ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਬ੍ਰੇਕਪੁਆਇੰਟ ਵੇਰੀਏਬਲ ਬੈਕਵਰਡ ਅਨੁਕੂਲਤਾ ਲਈ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਰਹਿੰਦੇ ਹਨ, ਬਸ਼ਰਤੇ ਉਹਨਾਂ ਨੂੰ JavaScript ਦੁਆਰਾ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਖਾਸ ਵਿੱਚ ਹੋਰ ਜਾਣੋ।

ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ:

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

ਅਤੇ ਇੱਥੇ ਇਸਦਾ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ ਸਮਰਥਿਤ ਹੈ:

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