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-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --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));
}

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

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

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

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

ਉਦਾਹਰਨਾਂ

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

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