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-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", Arial, "Noto Sans", "Liberation Sans", 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;
}

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

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

ਅਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰ ਰਹੇ ਹਾਂ ਇਸ ਬਾਰੇ ਕੁਝ ਸਮਝ ਲਈ ਸਾਡੇ ਸਾਰਣੀ ਦਸਤਾਵੇਜ਼ਾਂ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ ।

ਅਸੀਂ ਆਪਣੇ ਗਰਿੱਡਾਂ ਵਿੱਚ CSS ਵੇਰੀਏਬਲ ਵੀ ਵਰਤ ਰਹੇ ਹਾਂ-ਮੁੱਖ ਤੌਰ 'ਤੇ ਗਟਰਾਂ ਲਈ-ਭਵਿੱਖ ਵਿੱਚ ਆਉਣ ਵਾਲੇ ਹੋਰ ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਦੇ ਨਾਲ।

ਉਦਾਹਰਨਾਂ

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

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

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

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