CSS ଭେରିଏବଲ୍ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏହାର ସଙ୍କଳିତ CSS ରେ ପ୍ରାୟ ଦୁଇ ଡଜନ CSS କଷ୍ଟମ୍ ପ୍ରପର୍ଟିଜ୍ (ଭେରିଏବଲ୍) ଅନ୍ତର୍ଭୂକ୍ତ କରେ , ପ୍ରତି ଉପାଦାନ ଭିତ୍ତିରେ ଉନ୍ନତ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ରାସ୍ତାରେ ଆହୁରି ଅନେକ | ଆମର ବ୍ରାଉଜର୍ ଇନ୍ସପେକ୍ଟର, ଏକ କୋଡ୍ ସ୍ୟାଣ୍ଡବକ୍ସ, କିମ୍ବା ସାଧାରଣ ପ୍ରୋଟୋଟାଇପିଂରେ କାର୍ଯ୍ୟ କରିବାବେଳେ ଏଗୁଡିକ ସାଧାରଣତ used ବ୍ୟବହୃତ ମୂଲ୍ୟଗୁଡିକ ପରି ଆମର ଥିମ୍ ରଙ୍ଗ, ବ୍ରେକପଏଣ୍ଟ, ଏବଂ ପ୍ରାଥମିକ ଫଣ୍ଟ୍ ଷ୍ଟାକଗୁଡିକ ପାଇଁ ସହଜ ପ୍ରବେଶ ପ୍ରଦାନ କରିଥାଏ |

ଆମର ସମସ୍ତ କଷ୍ଟମ୍ ଗୁଣଗୁଡିକbs- ତୃତୀୟ ପକ୍ଷ CSS ସହିତ ବିବାଦକୁ ଏଡ଼ାଇବା ପାଇଁ ଉପସର୍ଗ କରାଯାଇଛି |

ରୁଟ୍ ଭେରିଏବଲ୍ |

ଏଠାରେ ଆମେ ଭେରିଏବଲ୍ ଗୁଡିକ ଅନ୍ତର୍ଭୂକ୍ତ କରୁ (ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ :rootଆବଶ୍ୟକ) ଯାହାକି ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଲୋଡ୍ ହୋଇଥିବା ଯେକ anywhere ଣସି ସ୍ଥାନରେ ପ୍ରବେଶ କରାଯାଇପାରିବ | _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 କୁ ହ୍ରାସ କରିପାରିବା, ସୁନିଶ୍ଚିତ କରେ ଯେ ଶ st ଳୀଗୁଡିକ ନେଷ୍ଟେଡ୍ ଟେବୁଲ୍ ପରି ସ୍ଥାନରେ ଉତ୍ତରାଧିକାରୀ ନୁହେଁ, ଏବଂ ସାସ୍ ସଂକଳନ ପରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନଗୁଡ଼ିକର କିଛି ମ basic ଳିକ ପୁନ y ଚାଳନା ଏବଂ ବିସ୍ତାରକୁ ଅନୁମତି ଦିଏ |

ଆମେ କିପରି CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରୁଛୁ ସେ ବିଷୟରେ କିଛି ବୁ ight ାମଣା ପାଇଁ ଆମର ଟେବୁଲ୍ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଉପରେ ନଜର ପକାନ୍ତୁ |

ଭବିଷ୍ୟତରେ ଅଧିକ ଉପାଦାନ ବ୍ୟବହାର ସହିତ ଆମେ ଆମର ଗ୍ରୀଡ୍ ଉପରେ CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରୁଛୁ - ମୁଖ୍ୟତ gut ଗୁଟର୍ ପାଇଁ |

ଉଦାହରଣଗୁଡିକ

CSS ଭେରିଏବଲ୍ ଗୁଡିକ ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ସମାନ ନମନୀୟତା ପ୍ରଦାନ କରେ, କିନ୍ତୁ ବ୍ରାଉଜରକୁ ସେବା କରିବା ପୂର୍ବରୁ ସଂକଳନର ଆବଶ୍ୟକତା ବିନା | ଉଦାହରଣ ସ୍ୱରୂପ, ଏଠାରେ ଆମେ ଆମର ପୃଷ୍ଠାର ଫଣ୍ଟ ଏବଂ CSS ଭେରିଏବଲ୍ ସହିତ ଲିଙ୍କ୍ ଶ yles ଳୀକୁ ପୁନ res ସେଟ୍ କରୁ |

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