CSS ਵੇਰੀਏਬਲ

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

ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂbs- ਤੀਜੀ ਧਿਰ ਦੇ CSS ਨਾਲ ਟਕਰਾਅ ਤੋਂ ਬਚਣ ਲਈ ਅੱਗੇ ਹਨ।

ਰੂਟ ਵੇਰੀਏਬਲ

ਇੱਥੇ ਉਹ ਵੇਰੀਏਬਲ ਹਨ ਜੋ ਅਸੀਂ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ (ਨੋਟ ਕਰੋ ਕਿ :rootਲੋੜੀਂਦਾ ਹੈ) ਜੋ ਕਿ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਨੂੰ ਲੋਡ ਕੀਤੇ ਜਾਣ 'ਤੇ ਕਿਤੇ ਵੀ ਐਕਸੈਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਉਹ ਸਾਡੀ _root.scssਫਾਈਲ ਵਿੱਚ ਸਥਿਤ ਹਨ ਅਤੇ ਸਾਡੀਆਂ ਕੰਪਾਇਲ ਕੀਤੀਆਂ ਡਿਸਟ ਫਾਈਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ।

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

ਕੰਪੋਨੈਂਟ ਵੇਰੀਏਬਲ

ਬੂਟਸਟਰੈਪ 5 ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਲਈ ਲੋਕਲ ਵੇਰੀਏਬਲ ਦੇ ਤੌਰ 'ਤੇ ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਤੇਜ਼ੀ ਨਾਲ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹੈ। ਇਸ ਤਰੀਕੇ ਨਾਲ ਅਸੀਂ ਆਪਣੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਨੂੰ ਘਟਾਉਂਦੇ ਹਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਾਂ ਕਿ ਨੇਸਟਡ ਟੇਬਲ ਵਰਗੀਆਂ ਥਾਵਾਂ 'ਤੇ ਸਟਾਈਲ ਵਿਰਾਸਤ ਵਿੱਚ ਨਹੀਂ ਮਿਲੀਆਂ ਹਨ, ਅਤੇ Sass ਕੰਪਾਈਲੇਸ਼ਨ ਤੋਂ ਬਾਅਦ ਕੁਝ ਬੁਨਿਆਦੀ ਰੀਸਟਾਇਲਿੰਗ ਅਤੇ ਬੂਟਸਟਰੈਪ ਭਾਗਾਂ ਨੂੰ ਵਧਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਾਂ।

ਅਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰ ਰਹੇ ਹਾਂ ਇਸ ਬਾਰੇ ਕੁਝ ਸਮਝ ਲਈ ਸਾਡੇ ਸਾਰਣੀ ਦਸਤਾਵੇਜ਼ਾਂ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ । ਸਾਡੇ ਨੇਵਬਾਰ ਵੀ 5.2.0 ਦੇ ਤੌਰ 'ਤੇ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਅਸੀਂ ਆਪਣੇ ਗਰਿੱਡਾਂ ਵਿੱਚ CSS ਵੇਰੀਏਬਲ ਦੀ ਵੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ-ਮੁੱਖ ਤੌਰ 'ਤੇ ਨਵੇਂ ਔਪਟ-ਇਨ CSS ਗਰਿੱਡ ਲਈ — ਭਵਿੱਖ ਵਿੱਚ ਆਉਣ ਵਾਲੇ ਹੋਰ ਕੰਪੋਨੈਂਟ ਵਰਤੋਂ ਦੇ ਨਾਲ।

ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਅਸੀਂ ਬੇਸ ਕੰਪੋਨੈਂਟ ਪੱਧਰ 'ਤੇ CSS ਵੇਰੀਏਬਲ ਨਿਰਧਾਰਤ ਕਰਾਂਗੇ (ਉਦਾਹਰਨ .navbarਲਈ, ਨੇਵਬਾਰ ਅਤੇ ਇਸਦੇ ਉਪ-ਕੰਪੋਨੈਂਟਸ ਲਈ)। ਇਹ ਕਿੱਥੇ ਅਤੇ ਕਿਵੇਂ ਕਸਟਮਾਈਜ਼ ਕਰਨਾ ਹੈ ਇਸ ਬਾਰੇ ਅੰਦਾਜ਼ਾ ਲਗਾਉਣਾ ਘਟਾਉਂਦਾ ਹੈ, ਅਤੇ ਭਵਿੱਖ ਦੇ ਅਪਡੇਟਾਂ ਵਿੱਚ ਸਾਡੀ ਟੀਮ ਦੁਆਰਾ ਆਸਾਨ ਸੋਧਾਂ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

ਅਗੇਤਰ

ਜ਼ਿਆਦਾਤਰ CSS ਵੇਰੀਏਬਲ ਤੁਹਾਡੇ ਆਪਣੇ ਕੋਡਬੇਸ ਨਾਲ ਟਕਰਾਅ ਤੋਂ ਬਚਣ ਲਈ ਇੱਕ ਅਗੇਤਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਹ ਅਗੇਤਰ --ਹਰੇਕ CSS ਵੇਰੀਏਬਲ ਲਈ ਲੋੜੀਂਦੇ ਤੋਂ ਇਲਾਵਾ ਹੈ।

$prefixSass ਵੇਰੀਏਬਲ ਦੁਆਰਾ ਅਗੇਤਰ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ । bs-ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ, ਇਹ (ਪਿਛਲੇ ਹੋਏ ਡੈਸ਼ ਨੂੰ ਨੋਟ ਕਰੋ) 'ਤੇ ਸੈੱਟ ਹੈ ।

ਉਦਾਹਰਨਾਂ

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

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

ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ

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