ଥିମ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |
ସହଜ ଥିମ୍ ଏବଂ ଉପାଦାନ ପରିବର୍ତ୍ତନ ପାଇଁ ଗ୍ଲୋବାଲ୍ ଷ୍ଟାଇଲ୍ ପସନ୍ଦ ପାଇଁ ଆମର ନୂତନ ବିଲ୍ଟ-ଇନ୍ ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ 4 କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ |
ପରିଚୟ
ବୁଟଷ୍ଟ୍ରାପ୍ In ରେ, ଥିମ୍ ଗୁଡିକ ମୁଖ୍ୟତ L LESS, କଷ୍ଟମ୍ CSS, ଏବଂ ଏକ ପୃଥକ ଥିମ୍ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ରେ ଭେରିଏବଲ୍ ଓଭରଡାଇଡ୍ ଦ୍ୱାରା ପରିଚାଳିତ ହୋଇଥିଲା ଯାହାକୁ ଆମେ ଆମ dist
ଫାଇଲରେ ଅନ୍ତର୍ଭୁକ୍ତ କରିଥିଲୁ | କିଛି ପ୍ରୟାସ ସହିତ, ମୂଳ ଫାଇଲଗୁଡ଼ିକୁ ସ୍ପର୍ଶ ନକରି ବୁଟଷ୍ଟ୍ରାପ୍ 3 ର ଲୁକକୁ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ପୁନ es ଡିଜାଇନ୍ କରିପାରେ | ବୁଟଷ୍ଟ୍ରାପ୍ 4 ଏକ ପରିଚିତ, କିନ୍ତୁ ସାମାନ୍ୟ ଭିନ୍ନ ଆଭିମୁଖ୍ୟ ପ୍ରଦାନ କରେ |
ବର୍ତ୍ତମାନ, ଥିମ୍ ସାସ୍ ଭେରିଏବଲ୍, ସାସ୍ ମାନଚିତ୍ର ଏବଂ କଷ୍ଟମ୍ CSS ଦ୍ୱାରା ସମ୍ପନ୍ନ ହୋଇଛି | ସେଠାରେ ଆଉ ଉତ୍ସର୍ଗୀକୃତ ଥିମ୍ ଶ yles ଳୀ ନାହିଁ; ଏହା ପରିବର୍ତ୍ତେ, ଆପଣ ଗ୍ରେଡିଏଣ୍ଟ୍, ଛାୟା ଏବଂ ଅଧିକ ଯୋଗ କରିବାକୁ ବିଲ୍ଟ-ଇନ୍ ଥିମ୍ ସକ୍ଷମ କରିପାରିବେ |
ସାସ୍ |
ଭେରିଏବଲ୍, ମାନଚିତ୍ର, ମିକ୍ସିନ୍, ଏବଂ ଅଧିକର ଲାଭ ଉଠାଇବା ପାଇଁ ଆମର ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |
ଫାଇଲ୍ ଗଠନ
ଯେତେବେଳେ ସମ୍ଭବ, ବୁଟଷ୍ଟ୍ରାପର ମୂଳ ଫାଇଲଗୁଡ଼ିକୁ ପରିବର୍ତ୍ତନ କରିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ | ସାସ୍ ପାଇଁ, ଏହାର ଅର୍ଥ ହେଉଛି ଆପଣଙ୍କର ନିଜସ୍ୱ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ତିଆରି କରିବା ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ କରେ ଯାହା ଦ୍ you ାରା ଆପଣ ଏହାକୁ ପରିବର୍ତ୍ତନ ଏବଂ ବିସ୍ତାର କରିପାରିବେ | ମନେକର ଯେ ତୁମେ npm ପରି ଏକ ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ବ୍ୟବହାର କରୁଛ, ତୁମର ଏକ ଫାଇଲ୍ ଗଠନ ଅଛି ଯାହା ଏହିପରି ଦେଖାଯାଉଛି:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
ଯଦି ତୁମେ ଆମର ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ଡାଉନଲୋଡ୍ କରିଛ ଏବଂ ଏକ ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ବ୍ୟବହାର କରୁନାହଁ, ତୁମେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ନିଜଠାରୁ ଅଲଗା ରଖି ସେହି ସଂରଚନା ସହିତ ସମାନ କିଛି ସେଟଅପ୍ କରିବାକୁ ଚାହୁଁଛ |
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
ଆମଦାନି
ଆପଣଙ୍କ ଭିତରେ custom.scss
, ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଫାଇଲ୍ ଆମଦାନି କରିବେ | ଆପଣଙ୍କର ଦୁଇଟି ବିକଳ୍ପ ଅଛି: ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ, କିମ୍ବା ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା ଅଂଶଗୁଡିକ ବାଛନ୍ତୁ | ଆମେ ପରବର୍ତ୍ତୀକୁ ଉତ୍ସାହିତ କରୁ, ଯଦିଓ ସଚେତନ ହୁଅନ୍ତୁ ଆମର ଉପାଦାନଗୁଡ଼ିକରେ କିଛି ଆବଶ୍ୟକତା ଏବଂ ନିର୍ଭରଶୀଳତା ଅଛି | ଆମ ପ୍ଲଗଇନ୍ ପାଇଁ ଆପଣଙ୍କୁ କିଛି ଜାଭାସ୍କ୍ରିପ୍ଟ ମଧ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ପଡିବ |
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@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";
ସେହି ସେଟଅପ୍ ସହିତ, ଆପଣ ଯେକ any ଣସି ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ମାନଚିତ୍ରଗୁଡିକୁ ରୂପାନ୍ତର କରିବା ଆରମ୍ଭ କରିପାରିବେ custom.scss
| // Optional
ଆପଣ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବିଭାଗ ଅନ୍ତର୍ଗତ ବୁଟଷ୍ଟ୍ରାପ୍ ର କିଛି ଅଂଶ ଯୋଡିବା ଆରମ୍ଭ କରିପାରିବେ | bootstrap.scss
ଆମର ପ୍ରାରମ୍ଭ ପଏଣ୍ଟ ଭାବରେ ଆମ ଫାଇଲରୁ ସମ୍ପୂର୍ଣ୍ଣ ଆମଦାନୀ ଷ୍ଟାକ ବ୍ୟବହାର କରିବାକୁ ଆମେ ପରାମର୍ଶ ଦେଉ |
ଭେରିଏବଲ୍ ଡିଫଲ୍ଟ |
ବୁଟଷ୍ଟ୍ରାପରେ ଥିବା ପ୍ରତ୍ୟେକ ସାସ୍ ଭେରିଏବଲ୍ !default
ଫ୍ଲାଗ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ କୋଡ୍ ପରିବର୍ତ୍ତନ ନକରି ନିଜ ସାସରେ ଭେରିଏବଲ୍ ର ଡିଫଲ୍ଟ ମୂଲ୍ୟକୁ ନବଲିଖନ କରିବାକୁ ଅନୁମତି ଦିଏ | ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଭେରିଏବଲ୍ କପି ଏବଂ ଲେପନ କରନ୍ତୁ, ସେମାନଙ୍କର ମୂଲ୍ୟ ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ !default
ପତାକା ଅପସାରଣ କରନ୍ତୁ | ଯଦି ଏକ ଭେରିଏବଲ୍ ପୂର୍ବରୁ ନ୍ୟସ୍ତ ହୋଇସାରିଛି, ତେବେ ଏହା ବୁଟଷ୍ଟ୍ରାପରେ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ଦ୍ୱାରା ପୁନ assigned ନ୍ୟସ୍ତ ହେବ ନାହିଁ |
ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଭେରିଏବଲ୍ସର ସମ୍ପୂର୍ଣ୍ଣ ତାଲିକା ପାଇବେ scss/_variables.scss
| କିଛି ଭେରିଏବଲ୍ ସେଟ୍ ହୋଇଛି null
, ଏହି ଭେରିଏବଲ୍ ଗୁଡିକ ତୁମର ବିନ୍ୟାସନରେ ନବଲିଖନ ନହେବା ପର୍ଯ୍ୟନ୍ତ ପ୍ରପର୍ଟି ଆଉଟପୁଟ୍ କରେ ନାହିଁ |
ଆମର କାର୍ଯ୍ୟ, ଭେରିଏବଲ୍, ଏବଂ ମିକ୍ସିନ ଆମଦାନୀ ହେବା ପରେ ଭେରିଏବଲ୍ ଓଭରଡାଇଡ୍ ନିଶ୍ଚିତ ଭାବରେ ଆସିବ, କିନ୍ତୁ ବାକି ଆମଦାନୀ ପୂର୍ବରୁ |
ଏଠାରେ ଏକ ଉଦାହରଣ ଅଛି ଯାହାକି npm ମାଧ୍ୟମରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ ଏବଂ ସଂକଳନ କରିବା ସମୟରେ background-color
ଏବଂ color
ପାଇଁ ପରିବର୍ତ୍ତନ କରିଥାଏ:<body>
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
ନିମ୍ନରେ ଥିବା ଗ୍ଲୋବାଲ୍ ଅପ୍ସନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରି ବୁଟଷ୍ଟ୍ରାପରେ ଯେକ any ଣସି ଭେରିଏବଲ୍ ପାଇଁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପୁନରାବୃତ୍ତି କରନ୍ତୁ |
ମାନଚିତ୍ର ଏବଂ ଲୁପ୍ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 4 ରେ କିଛି ହାତଗଣତି ସାସ୍ ମାନଚିତ୍ର, ପ୍ରମୁଖ ମୂଲ୍ୟ ଯୁଗଳ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ଯାହା ସମ୍ପୃକ୍ତ CSS ର ପରିବାର ସୃଷ୍ଟି କରିବା ସହଜ କରିଥାଏ | ଆମେ ଆମର ରଙ୍ଗ, ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟ, ଏବଂ ଅଧିକ ପାଇଁ ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରୁ | ସାସ୍ ଭେରିଏବଲ୍ ପରି, ସମସ୍ତ ସାସ୍ ମାନଚିତ୍ରରେ !default
ପତାକା ଅନ୍ତର୍ଭୁକ୍ତ ଏବଂ ଏହାକୁ ନବଲିଖନ କରାଯାଇପାରିବ ଏବଂ ବିସ୍ତାର କରାଯାଇପାରିବ |
ଆମର କିଛି ସାସ୍ ମାନଚିତ୍ରଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ଖାଲିରେ ମିଶ୍ରିତ | ଦିଆଯାଇଥିବା ସାସ୍ ମାନଚିତ୍ରର ସହଜ ବିସ୍ତାରକୁ ଅନୁମତି ଦେବା ପାଇଁ ଏହା କରାଯାଇଥାଏ, କିନ୍ତୁ ମାନଚିତ୍ରରୁ ଆଇଟମଗୁଡିକ ଅପସାରଣ କରିବା ଟିକେ ଅଧିକ କଷ୍ଟସାଧ୍ୟ ମୂଲ୍ୟରେ ଆସିଥାଏ |
ମାନଚିତ୍ର ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
ଆମ $theme-colors
ମାନଚିତ୍ରରେ ଏକ ବିଦ୍ୟମାନ ରଙ୍ଗକୁ ରୂପାନ୍ତର କରିବାକୁ, ଆପଣଙ୍କର କଷ୍ଟମ୍ ସାସ୍ ଫାଇଲରେ ନିମ୍ନକୁ ଯୋଡନ୍ତୁ:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
ମାନଚିତ୍ରରେ ଯୋଡନ୍ତୁ |
ଏଥିରେ ଏକ ନୂତନ ରଙ୍ଗ $theme-colors
ଯୋଡିବାକୁ, ନୂତନ ଚାବି ଏବଂ ମୂଲ୍ୟ ଯୋଡନ୍ତୁ:
$theme-colors: (
"custom-color": #900
);
ମାନଚିତ୍ରରୁ ଅପସାରଣ କରନ୍ତୁ |
କିମ୍ବା ଅନ୍ୟ କ map ଣସି ମାନଚିତ୍ରରୁ ରଙ୍ଗ ହଟାଇବାକୁ $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";
...
ଆବଶ୍ୟକ କିଗୁଡ଼ିକ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସାସ୍ ମାନଚିତ୍ରରେ କିଛି ନିର୍ଦ୍ଦିଷ୍ଟ କିଗୁଡ଼ିକର ଉପସ୍ଥିତି ଅନୁମାନ କରେ ଯେହେତୁ ଆମେ ଏହାକୁ ନିଜେ ବ୍ୟବହାର କରୁ ଏବଂ ବିସ୍ତାର କରୁ | ଯେହେତୁ ଆପଣ ଅନ୍ତର୍ଭୁକ୍ତ ମାନଚିତ୍ରଗୁଡ଼ିକୁ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତି, ଆପଣ ତ୍ରୁଟିର ସମ୍ମୁଖୀନ ହୋଇପାରନ୍ତି ଯେଉଁଠାରେ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସାସ୍ ମାନଚିତ୍ରର ଚାବି ବ୍ୟବହାର କରାଯାଏ |
ଉଦାହରଣ ସ୍ୱରୂପ, ଆମେ ଲିଙ୍କ୍, ବଟନ୍, ଏବଂ ଫର୍ମ ଷ୍ଟେଟସ୍ ପାଇଁ primary
, success
ଏବଂ danger
କିଗୁଡ଼ିକୁ ବ୍ୟବହାର କରୁ | $theme-colors
ଏହି ଚାବିଗୁଡ଼ିକର ମୂଲ୍ୟ ବଦଳାଇବା ଦ୍ୱାରା କ issues ଣସି ସମସ୍ୟା ଉପସ୍ଥାପିତ ହେବା ଉଚିତ ନୁହେଁ, କିନ୍ତୁ ସେଗୁଡିକ ଅପସାରଣ କରିବା ଦ୍ୱାରା ସାସ୍ ସଂକଳନ ସମସ୍ୟା ହୋଇପାରେ | ଏହି ପରିସ୍ଥିତିରେ, ଆପଣଙ୍କୁ ସାସ୍ କୋଡ୍ ସଂଶୋଧନ କରିବାକୁ ପଡିବ ଯାହା ସେହି ମୂଲ୍ୟଗୁଡ଼ିକର ବ୍ୟବହାର କରେ |
କାର୍ଯ୍ୟଗୁଡ଼ିକ
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଅନେକ ସାସ୍ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରେ, କିନ୍ତୁ ସାଧାରଣ ଥିମ୍ ପାଇଁ କେବଳ ଏକ ସବ୍ସେଟ୍ ପ୍ରଯୁଜ୍ୟ | ରଙ୍ଗ ମାନଚିତ୍ରରୁ ମୂଲ୍ୟ ପାଇବା ପାଇଁ ଆମେ ତିନୋଟି କାର୍ଯ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରିଛୁ:
@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);
}
ଏଗୁଡିକ ଆପଣଙ୍କୁ ସାସ୍ ମାନଚିତ୍ରରୁ ଗୋଟିଏ ରଙ୍ଗ ବାଛିବା ପାଇଁ ଅନୁମତି ଦିଏ ଯେପରି ଆପଣ 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);
}
ଭବିଷ୍ୟତରେ ଅତିରିକ୍ତ କାର୍ଯ୍ୟଗୁଡ଼ିକ କିମ୍ବା ଆପଣଙ୍କ ନିଜସ୍ୱ କଷ୍ଟମ୍ ସାସ୍ ଅତିରିକ୍ତ ସାସ୍ ମାନଚିତ୍ର ପାଇଁ ସ୍ତରୀୟ କାର୍ଯ୍ୟ ସୃଷ୍ଟି କରିବାକୁ, କିମ୍ବା ଯଦି ଆପଣ ଅଧିକ ଭର୍ସୋଜ୍ ହେବାକୁ ଚାହାଁନ୍ତି, ତେବେ ଏକ ଜେନେରିକ୍ ମଧ୍ୟ ଯୋଗ କରାଯାଇପାରେ |
ରଙ୍ଗ ବିପରୀତ |
ବୁଟଷ୍ଟ୍ରାପରେ ଆମେ ଅନ୍ତର୍ଭୂକ୍ତ କରୁଥିବା ଏକ ଅତିରିକ୍ତ କାର୍ଯ୍ୟ ହେଉଛି ରଙ୍ଗ ବିପରୀତ କାର୍ଯ୍ୟ , color-yiq
। ନିର୍ଦ୍ଦିଷ୍ଟ ଆଧାର ରଙ୍ଗ ଉପରେ ଆଧାର କରି ଏହା ଏକ ହାଲୁକା ( ) କିମ୍ବା ଗା dark ( ) ବିପରୀତ ରଙ୍ଗକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଫେରାଇବା ପାଇଁ 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`
}
SVG କୁ ପଳାନ୍ତୁ |
ଏସ୍.ଭି.ଜି ବ୍ୟାକଗ୍ରାଉଣ୍ଡ୍ ପ୍ରତିଛବିଗୁଡିକ ପାଇଁ ଆମେ ଫଙ୍କସନ୍ ବ୍ୟବହାର escape-svg
କରୁ | IE ରେ ପୃଷ୍ଠଭୂମି ଚିତ୍ରଗୁଡ଼ିକୁ ସଠିକ୍ ଭାବରେ ଉପସ୍ଥାପନ କରିବା ପାଇଁ ଏହି ଅକ୍ଷରଗୁଡିକ ପଳାୟନ କରାଯିବା ଆବଶ୍ୟକ | ଫଙ୍କସନ୍ ବ୍ୟବହାର କରିବାବେଳେ , ଡାଟା URI ଗୁଡିକ ଉଦ୍ଧୃତ ହେବା ଜରୁରୀ |<
>
#
escape-svg
ଫଙ୍କସନ୍ ଗୁଡିକ ଯୋଡନ୍ତୁ ଏବଂ ବାହାର କରନ୍ତୁ |
CSS ଫଙ୍କସନ୍ ଗୁଡ଼ାଇବା ପାଇଁ ଆମେ add
ଏବଂ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରୁ | ଏହି କାର୍ଯ୍ୟଗୁଡ଼ିକର ମୂଳ ଉଦ୍ଦେଶ୍ୟ ହେଉଛି ଯେତେବେଳେ ଏକ “ଏକକହୀନ” ମୂଲ୍ୟ ଏକ ଅଭିବ୍ୟକ୍ତିରେ ପାସ୍ ହୁଏ ତ୍ରୁଟିରୁ ଦୂରେଇ ରହିବା | ଗାଣିତିକ ସଠିକ୍ ସତ୍ତ୍ୱେ ସମସ୍ତ ବ୍ରାଉଜରରେ ଏକ୍ସପ୍ରେସନ୍ ଭଳି ଏକ ତ୍ରୁଟି ଫେରସ୍ତ କରିବ |subtract
calc
0
calc
calc(10px - 0)
ଉଦାହରଣ ଯେଉଁଠାରେ ଗଣନା ବ valid ଧ:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
ଉଦାହରଣ ଯେଉଁଠାରେ ଗଣନା ଅବ alid ଧ ଅଟେ:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
ସାସ୍ ବିକଳ୍ପଗୁଡିକ |
ଆମର ବିଲ୍ଟ-ଇନ୍ କଷ୍ଟମ୍ ଭେରିଏବଲ୍ ଫାଇଲ୍ ସହିତ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 4 କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ ଏବଂ ନୂତନ $enable-*
ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ଗ୍ଲୋବାଲ୍ CSS ପସନ୍ଦଗୁଡ଼ିକୁ ସହଜରେ ଟୋଗଲ୍ କରନ୍ତୁ | ଏକ ଭେରିଏବଲ୍ ର ଭାଲ୍ୟୁକୁ ନବଲିଖନ କରନ୍ତୁ ଏବଂ npm run test
ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତୁ |
scss/_variables.scss
ବୁଟଷ୍ଟ୍ରାପ୍ ଫାଇଲ୍ ରେ ପ୍ରମୁଖ ଗ୍ଲୋବାଲ୍ ଅପ୍ସନ୍ ପାଇଁ ଆପଣ ଏହି ଭେରିଏବଲ୍ଗୁଡ଼ିକୁ ସନ୍ଧାନ ଏବଂ କଷ୍ଟମାଇଜ୍ କରିପାରିବେ |
ଭେରିଏବଲ୍ | ମୂଲ୍ୟଗୁଡ଼ିକ | ବର୍ଣ୍ଣନା |
---|---|---|
$spacer |
1rem (ଡିଫଲ୍ଟ), କିମ୍ବା ଯେକ value ଣସି ମୂଲ୍ୟ> 0 | |
ପ୍ରୋଗ୍ରାମେଟିକ୍ ଭାବରେ ଆମର ସ୍ପେସର୍ ଉପଯୋଗିତା ସୃଷ୍ଟି କରିବାକୁ ଡିଫଲ୍ଟ ସ୍ପେସର୍ ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରେ | |
$enable-rounded |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
border-radius ବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଶ yles ଳୀକୁ ସକ୍ଷମ କରିଥାଏ | |
$enable-shadows |
true କିମ୍ବା false (ଡିଫଲ୍ଟ) |
box-shadow ବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ସାଜସଜ୍ଜା ଶ yles ଳୀକୁ ସକ୍ଷମ କରିଥାଏ | box-shadow ଫୋକସ୍ ଷ୍ଟେଟ୍ ପାଇଁ ବ୍ୟବହୃତ s କୁ ପ୍ରଭାବିତ କରେ ନାହିଁ | |
$enable-gradients |
true କିମ୍ବା false (ଡିଫଲ୍ଟ) |
background-image ବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ଶ yles ଳୀ ମାଧ୍ୟମରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରେଡିଏଣ୍ଟଗୁଡ଼ିକୁ ସକ୍ଷମ କରିଥାଏ | |
$enable-transitions |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
ବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ transition s କୁ ସକ୍ଷମ କରିଥାଏ | |
$enable-prefers-reduced-motion-media-query |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
prefers-reduced-motion ମିଡିଆ ଜିଜ୍ଞାସାକୁ ସକ୍ଷମ କରିଥାଏ , ଯାହାକି ଉପଭୋକ୍ତାମାନଙ୍କ ବ୍ରାଉଜର୍ / ଅପରେଟିଂ ସିଷ୍ଟମ୍ ପସନ୍ଦ ଉପରେ ଆଧାର କରି କିଛି ଆନିମେସନ୍ / ଟ୍ରାନ୍ସସାଇନ୍ସକୁ ଦମନ କରିଥାଏ | |
$enable-hover-media-query |
true କିମ୍ବା false (ଡିଫଲ୍ଟ) |
ନାପସନ୍ଦ |
$enable-grid-classes |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
.container ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ (ଯଥା ,,, .row ଇତ୍ୟାଦି .col-md-1 ) ପାଇଁ CSS ଶ୍ରେଣୀର ଉତ୍ପାଦନକୁ ସକ୍ଷମ କରିଥାଏ | |
$enable-caret |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
ସିଉଡୋ ଏଲିମେଣ୍ଟ୍ କ୍ୟାରେଟ୍ ଅନ୍ ସକ୍ଷମ କରେ .dropdown-toggle | |
$enable-pointer-cursor-for-buttons |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
ଅଣ-ଅକ୍ଷମ ବଟନ୍ ଉପାଦାନଗୁଡ଼ିକରେ “ହ୍ୟାଣ୍ଡ” କର୍ସର୍ ଯୋଡନ୍ତୁ | |
$enable-print-styles |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
ମୁଦ୍ରଣକୁ ଅପ୍ଟିମାଇଜ୍ କରିବା ପାଇଁ ଶ yles ଳୀ ସକ୍ଷମ କରେ | |
$enable-responsive-font-sizes |
true କିମ୍ବା false (ଡିଫଲ୍ଟ) |
ପ୍ରତିକ୍ରିୟାଶୀଳ ଫଣ୍ଟ ଆକାରକୁ ସକ୍ଷମ କରିଥାଏ | |
$enable-validation-icons |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
background-image ପାଠ୍ୟ ଇନପୁଟ୍ ଏବଂ ବ valid ଧତା ଅବସ୍ଥା ପାଇଁ କିଛି କଷ୍ଟମ୍ ଫର୍ମ ମଧ୍ୟରେ ଆଇକନ୍ ସକ୍ଷମ କରେ | |
$enable-deprecation-messages |
true (ଡିଫଲ୍ଟ) କିମ୍ବାfalse |
false ଯେକ any ଣସି ପୁରୁଣା ମିଶ୍ରଣ ଏବଂ କାର୍ଯ୍ୟଗୁଡିକ ବ୍ୟବହାର କରିବା ସମୟରେ ଚେତାବନୀ ଲୁଚାଇବାକୁ ସେଟ୍ କରନ୍ତୁ ଯାହା ଅପସାରଣ କରିବାକୁ ଯୋଜନା କରାଯାଇଛି v5 | |
ରଙ୍ଗ
ବୁଟଷ୍ଟ୍ରାପର ଅନେକ ଉପାଦାନ ଏବଂ ଉପଯୋଗିତା ସାସ୍ ମାନଚିତ୍ରରେ ବ୍ୟାଖ୍ୟା କରାଯାଇଥିବା ରଙ୍ଗର କ୍ରମ ମାଧ୍ୟମରେ ନିର୍ମିତ | ଏହି ମାନଚିତ୍ରକୁ ଶୀଘ୍ର ଏକ ଶୃଙ୍ଖଳା ସୃଷ୍ଟି କରିବାକୁ ସାସରେ ଲୁପ୍ କରାଯାଇପାରିବ |
ସମସ୍ତ ରଙ୍ଗ |
ବୁଟଷ୍ଟ୍ରାପ୍ 4 ରେ ଉପଲବ୍ଧ ସମସ୍ତ ରଙ୍ଗ, ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ scss/_variables.scss
ଫାଇଲରେ ଏକ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ଉପଲବ୍ଧ | ଅତିରିକ୍ତ ଛାୟା ଯୋଡିବା ପାଇଁ ପରବର୍ତ୍ତୀ ଛୋଟ ପ୍ରକାଶନରେ ଏହା ବିସ୍ତାର ହେବ, ଯେପରି ଆମେ ପୂର୍ବରୁ ଅନ୍ତର୍ଭୁକ୍ତ ଗ୍ରେସ୍କେଲ୍ ପ୍ୟାଲେଟ୍ ପରି |
ତୁମ ସାସରେ ତୁମେ ଏହାକୁ କିପରି ବ୍ୟବହାର କରିପାରିବ ତାହା ଏଠାରେ ଅଛି:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
color
ସେଟିଂ ପାଇଁ ରଙ୍ଗ ଉପଯୋଗୀତା ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟ ଉପଲବ୍ଧ background-color
|
ଥିମ୍ ରଙ୍ଗ |
scss/_variables.scss
ରଙ୍ଗ ସ୍କିମ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏକ ଛୋଟ ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଆମେ ସମସ୍ତ ରଙ୍ଗର ଏକ ସବ୍ସେଟ୍ ବ୍ୟବହାର କରୁ, ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ଫାଇଲ୍ ରେ ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ମଧ୍ୟ ଉପଲବ୍ଧ |
ଧୂସର
ଧୂସର ଭେରିଏବଲ୍ସର ଏକ ବିସ୍ତାରିତ ସେଟ୍ ଏବଂ scss/_variables.scss
ଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟରେ ଧୂସର ରଙ୍ଗର ଛାୟା ପାଇଁ ଏକ ସାସ୍ ମାନଚିତ୍ର | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏଗୁଡ଼ିକ ହେଉଛି “ଶୀତଳ ଧୂସର”, ଯାହା ନିରପେକ୍ଷ ଧୂସର ଅପେକ୍ଷା ସୂକ୍ଷ୍ମ ନୀଳ ସ୍ୱର ଆଡକୁ ଥାଏ |
ଭିତରେ scss/_variables.scss
, ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର ରଙ୍ଗ ଭେରିଏବଲ୍ ଏବଂ ସାସ୍ ମାନଚିତ୍ର ପାଇବେ | $colors
ସାସ୍ ମାନଚିତ୍ରର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି :
$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;
ମାନଚିତ୍ରରେ ମୂଲ୍ୟଗୁଡିକ ଯୋଡନ୍ତୁ, ଅପସାରଣ କରନ୍ତୁ କିମ୍ବା ପରିବର୍ତ୍ତନ କରନ୍ତୁ, ସେମାନେ ଅନ୍ୟାନ୍ୟ ଉପାଦାନରେ କିପରି ବ୍ୟବହାର କରନ୍ତି ତାହା ଅଦ୍ୟତନ କରିବାକୁ | ଦୁର୍ଭାଗ୍ୟବଶତ this ଏହି ସମୟରେ, ପ୍ରତ୍ୟେକ ଉପାଦାନ ଏହି ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରେ ନାହିଁ | ଭବିଷ୍ୟତର ଅଦ୍ୟତନଗୁଡ଼ିକ ଏଥିରେ ଉନ୍ନତି କରିବାକୁ ଚେଷ୍ଟା କରିବ | ସେପର୍ଯ୍ୟନ୍ତ, ${color}
ଭେରିଏବଲ୍ ଏବଂ ଏହି ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରିବାକୁ ଯୋଜନା କରନ୍ତୁ |
ଉପାଦାନଗୁଡ଼ିକ |
ଅନେକ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉପାଦାନ ଏବଂ ଉପଯୋଗିତା @each
ଲୁପ୍ ସହିତ ନିର୍ମିତ ଯାହା ଏକ ସାସ୍ ମାନଚିତ୍ରରେ ପୁନରାବୃତ୍ତି କରେ | ଏହା ଆମ ଦ୍ୱାରା ଏକ ଉପାଦାନର $theme-colors
ପ୍ରକାରଗୁଡିକ ସୃଷ୍ଟି କରିବା ଏବଂ ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରକାରଗୁଡିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ବିଶେଷ ସହାୟକ ହୋଇଥାଏ | ଯେହେତୁ ଆପଣ ଏହି ସାସ୍ ମାନଚିତ୍ରଗୁଡିକୁ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତି ଏବଂ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତି, ଆପଣ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏହି ପରିବର୍ତ୍ତନଗୁଡ଼ିକରେ ଏହି ପରିବର୍ତ୍ତନଗୁଡ଼ିକରେ ପ୍ରତିଫଳିତ ହୋଇଥିବାର ଦେଖିବେ |
ପରିବର୍ତ୍ତନକାରୀ
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅନେକ ଉପାଦାନ ଏକ ବେସ୍-ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ପଦ୍ଧତି ସହିତ ନିର୍ମିତ | ଏହାର ଅର୍ଥ ହେଉଛି ଷ୍ଟାଇଲିଂର ବହୁଳ ଅଂଶ ଏକ ବେସ୍ କ୍ଲାସ୍ (ଯଥା, .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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
ଉଦାହରଣଗୁଡିକ
CSS ଭେରିଏବଲ୍ ଗୁଡିକ ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ସମାନ ନମନୀୟତା ପ୍ରଦାନ କରେ, କିନ୍ତୁ ବ୍ରାଉଜରକୁ ସେବା କରିବା ପୂର୍ବରୁ ସଂକଳନର ଆବଶ୍ୟକତା ବିନା | ଉଦାହରଣ ସ୍ୱରୂପ, ଏଠାରେ ଆମେ ଆମର ପୃଷ୍ଠାର ଫଣ୍ଟ ଏବଂ CSS ଭେରିଏବଲ୍ ସହିତ ଲିଙ୍କ୍ ଶ yles ଳୀକୁ ପୁନ res ସେଟ୍ କରୁ |
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
ବ୍ରେକପଏଣ୍ଟ ଭେରିଏବଲ୍ |
ଯେତେବେଳେ ଆମେ ମୂଳତ our ଆମର CSS ଭେରିଏବଲ୍ ଗୁଡିକରେ ବ୍ରେକପଏଣ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ କରିଥିଲୁ (ଯଥା, --breakpoint-md
), ଏଗୁଡିକ ମିଡିଆ ଜିଜ୍ଞାସାରେ ସମର୍ଥିତ ନୁହେଁ , କିନ୍ତୁ ସେଗୁଡିକ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକରେ ନିୟମ ମଧ୍ୟରେ ବ୍ୟବହୃତ ହୋଇପାରେ | ଏହି ବ୍ରେକପଏଣ୍ଟ ଭେରିଏବଲ୍ ଗୁଡିକ ପଛୁଆ ସୁସଙ୍ଗତତା ପାଇଁ ସଙ୍କଳିତ CSS ରେ ରହିଥାଏ, କାରଣ ସେଗୁଡିକ ଜାଭାସ୍କ୍ରିପ୍ଟ ଦ୍ୱାରା ବ୍ୟବହାର କରାଯାଇପାରିବ | ନିର୍ଦ୍ଦିଷ୍ଟରେ ଅଧିକ ଜାଣନ୍ତୁ |
ଯାହା ସମର୍ଥିତ ନୁହେଁ ତାହାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି :
@media (min-width: var(--breakpoint-sm)) {
...
}
ଯାହା ସମର୍ଥିତ ତାହାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି :
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}