ସାସ୍ |

ଭେରିଏବଲ୍, ମାନଚିତ୍ର, ମିକ୍ସିନ୍, ଏବଂ କାର୍ଯ୍ୟଗୁଡ଼ିକର ଲାଭ ଉଠାଇବା ପାଇଁ ଆମର ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ ଯାହା ଆପଣଙ୍କୁ ଶୀଘ୍ର ନିର୍ମାଣ କରିବାରେ ଏବଂ ଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟକୁ କଷ୍ଟମାଇଜ୍ କରିବାରେ ସାହାଯ୍ୟ କରେ |

ଏହି ପୃଷ୍ଠାରେ |

ଭେରିଏବଲ୍, ମାନଚିତ୍ର, ମିକ୍ସିନ୍, ଏବଂ ଅଧିକ ଲାଭ ଉଠାଇବାକୁ ଆମର ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

ଫାଇଲ୍ ଗଠନ

ଯେତେବେଳେ ସମ୍ଭବ, ବୁଟଷ୍ଟ୍ରାପର ମୂଳ ଫାଇଲଗୁଡ଼ିକୁ ପରିବର୍ତ୍ତନ କରିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ | ସାସ୍ ପାଇଁ, ଏହାର ଅର୍ଥ ହେଉଛି ଆପଣଙ୍କର ନିଜସ୍ୱ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ତିଆରି କରିବା ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ କରେ ଯାହା ଦ୍ 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

ସେହି ସେଟଅପ୍ ସହିତ, ଆପଣ ଯେକ any ଣସି ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ମାନଚିତ୍ରଗୁଡିକୁ ରୂପାନ୍ତର କରିବା ଆରମ୍ଭ କରିପାରିବେ custom.scss| // Optionalଆପଣ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବିଭାଗ ଅନ୍ତର୍ଗତ ବୁଟଷ୍ଟ୍ରାପ୍ ର କିଛି ଅଂଶ ଯୋଡିବା ଆରମ୍ଭ କରିପାରିବେ | bootstrap.scssଆମର ପ୍ରାରମ୍ଭ ପଏଣ୍ଟ ଭାବରେ ଆମ ଫାଇଲରୁ ସମ୍ପୂର୍ଣ୍ଣ ଆମଦାନୀ ଷ୍ଟାକ ବ୍ୟବହାର କରିବାକୁ ଆମେ ପରାମର୍ଶ ଦେଉ |

ଭେରିଏବଲ୍ ଡିଫଲ୍ଟ |

ବୁଟଷ୍ଟ୍ରାପରେ ଥିବା ପ୍ରତ୍ୟେକ ସାସ୍ ଭେରିଏବଲ୍ !defaultଫ୍ଲାଗ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ କୋଡ୍ ପରିବର୍ତ୍ତନ ନକରି ନିଜ ସାସରେ ଭେରିଏବଲ୍ ର ଡିଫଲ୍ଟ ମୂଲ୍ୟକୁ ନବଲିଖନ କରିବାକୁ ଅନୁମତି ଦିଏ | ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଭେରିଏବଲ୍ କପି ଏବଂ ଲେପନ କରନ୍ତୁ, ସେମାନଙ୍କର ମୂଲ୍ୟ ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ !defaultପତାକା ଅପସାରଣ କରନ୍ତୁ | ଯଦି ଏକ ଭେରିଏବଲ୍ ପୂର୍ବରୁ ନ୍ୟସ୍ତ ହୋଇସାରିଛି, ତେବେ ଏହା ବୁଟଷ୍ଟ୍ରାପରେ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ଦ୍ୱାରା ପୁନ assigned ନ୍ୟସ୍ତ ହେବ ନାହିଁ |

ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଭେରିଏବଲ୍ସର ସମ୍ପୂର୍ଣ୍ଣ ତାଲିକା ପାଇବେ scss/_variables.scss| କିଛି ଭେରିଏବଲ୍ ସେଟ୍ ହୋଇଛି null, ଏହି ଭେରିଏବଲ୍ ଗୁଡିକ ତୁମର ବିନ୍ୟାସନରେ ନବଲିଖନ ନହେବା ପର୍ଯ୍ୟନ୍ତ ପ୍ରପର୍ଟି ଆଉଟପୁଟ୍ କରେ ନାହିଁ |

ଆମର କାର୍ଯ୍ୟ ଆମଦାନୀ ହେବା ପରେ ଭେରିଏବଲ୍ ଓଭରଡାଇଡ୍ ନିଶ୍ଚିତ ଭାବରେ ଆସିବ, କିନ୍ତୁ ବାକି ଆମଦାନୀ ପୂର୍ବରୁ |

ଏଠାରେ ଏକ ଉଦାହରଣ ଅଛି ଯାହାକି npm ମାଧ୍ୟମରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ ଏବଂ ସଂକଳନ କରିବା ସମୟରେ background-colorଏବଂ colorପାଇଁ ପରିବର୍ତ୍ତନ କରିଥାଏ:<body>

// Required
@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/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

ନିମ୍ନରେ ଥିବା ଗ୍ଲୋବାଲ୍ ଅପ୍ସନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରି ବୁଟଷ୍ଟ୍ରାପରେ ଯେକ any ଣସି ଭେରିଏବଲ୍ ପାଇଁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପୁନରାବୃତ୍ତି କରନ୍ତୁ |

ଆମର ଷ୍ଟାର୍ଟର୍ ପ୍ରୋଜେକ୍ଟ ସହିତ npm ମାଧ୍ୟମରେ ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଆରମ୍ଭ କରନ୍ତୁ! ନିଜ ନିଜ npm ପ୍ରୋଜେକ୍ଟରେ ବୁଟଷ୍ଟ୍ରାପ୍ କିପରି ନିର୍ମାଣ ଏବଂ କଷ୍ଟମାଇଜ୍ କରିବେ ତାହା ଦେଖିବା ପାଇଁ twbs / bootstrap-npm-starter ଟେମ୍ପଲେଟ୍ ରେପୋଜିଟୋରୀକୁ ଯାଆନ୍ତୁ | ସାସ୍ କମ୍ପାଇଲର୍, ଅଟୋଫ୍ରେଫିକ୍ସର୍, ଷ୍ଟାଇଲିଣ୍ଟ୍, ପର୍ଜେସିଏସ୍, ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଇକନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |

ମାନଚିତ୍ର ଏବଂ ଲୁପ୍ |

ବୁଟଷ୍ଟ୍ରାପରେ ହାତଗଣତି ସାସ୍ ମାନଚିତ୍ର, ପ୍ରମୁଖ ମୂଲ୍ୟ ଯୁଗଳ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ଯାହା ସମ୍ବନ୍ଧୀୟ CSS ର ପରିବାର ସୃଷ୍ଟି କରିବା ସହଜ କରିଥାଏ | ଆମେ ଆମର ରଙ୍ଗ, ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟ, ଏବଂ ଅଧିକ ପାଇଁ ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରୁ | ସାସ୍ ଭେରିଏବଲ୍ ପରି, ସମସ୍ତ ସାସ୍ ମାନଚିତ୍ରରେ !defaultପତାକା ଅନ୍ତର୍ଭୁକ୍ତ ଏବଂ ଏହାକୁ ନବଲିଖନ କରାଯାଇପାରିବ ଏବଂ ବିସ୍ତାର କରାଯାଇପାରିବ |

ଆମର କିଛି ସାସ୍ ମାନଚିତ୍ରଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ଖାଲିରେ ମିଶ୍ରିତ | ଦିଆଯାଇଥିବା ସାସ୍ ମାନଚିତ୍ରର ସହଜ ବିସ୍ତାରକୁ ଅନୁମତି ଦେବା ପାଇଁ ଏହା କରାଯାଇଥାଏ, କିନ୍ତୁ ମାନଚିତ୍ରରୁ ଆଇଟମଗୁଡିକ ଅପସାରଣ କରିବା ଟିକେ ଅଧିକ କଷ୍ଟସାଧ୍ୟ ମୂଲ୍ୟରେ ଆସିଥାଏ |

ମାନଚିତ୍ର ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

ମାନଚିତ୍ରରେ ଥିବା ସମସ୍ତ ଭେରିଏବଲ୍ $theme-colorsଗୁଡିକ ସ୍ୱତନ୍ତ୍ର ଭେରିଏବଲ୍ ଭାବରେ ବ୍ୟାଖ୍ୟା କରାଯାଇଛି | ଆମ $theme-colorsମାନଚିତ୍ରରେ ଏକ ବିଦ୍ୟମାନ ରଙ୍ଗକୁ ରୂପାନ୍ତର କରିବାକୁ, ଆପଣଙ୍କର କଷ୍ଟମ୍ ସାସ୍ ଫାଇଲରେ ନିମ୍ନକୁ ଯୋଡନ୍ତୁ:

$primary: #0074d9;
$danger: #ff4136;

ପରେ, ଏହି ଭେରିଏବଲ୍ ଗୁଡିକ ବୁଟଷ୍ଟ୍ରାପ୍ $theme-colorsମାନଚିତ୍ରରେ ସେଟ୍ ହୋଇଛି:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

ମାନଚିତ୍ରରେ ଯୋଡନ୍ତୁ |

ଆପଣଙ୍କର କଷ୍ଟମ୍ ମୂଲ୍ୟ ସହିତ ଏକ ନୂତନ ସାସ୍ ମାନଚିତ୍ର ସୃଷ୍ଟି କରି ଏବଂ ଏହାକୁ ମୂଳ ମାନଚିତ୍ର ସହିତ ମିଶ୍ରଣ କରି ନୂତନ ରଙ୍ଗ $theme-colorsକିମ୍ବା ଅନ୍ୟ କ map ଣସି ମାନଚିତ୍ରରେ ଯୋଡନ୍ତୁ | ଏହି କ୍ଷେତ୍ରରେ, ଆମେ ଏକ ନୂତନ $custom-colorsମାନଚିତ୍ର ସୃଷ୍ଟି କରିବା ଏବଂ ଏହାକୁ ମିଶ୍ରଣ କରିବା $theme-colors|

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

ମାନଚିତ୍ରରୁ ଅପସାରଣ କରନ୍ତୁ |

କିମ୍ବା ଅନ୍ୟ କ map ଣସି ମାନଚିତ୍ରରୁ ରଙ୍ଗ ହଟାଇବାକୁ $theme-colors, ବ୍ୟବହାର କରନ୍ତୁ map-remove| ସାବଧାନ ରୁହନ୍ତୁ ତୁମେ $theme-colorsଏହାର ଆବଶ୍ୟକତା ମଧ୍ୟରେ ଏହାର ସଂଜ୍ଞା ପରେ variablesଏବଂ ଏହାର ବ୍ୟବହାର ପୂର୍ବରୁ ସନ୍ନିବେଶ କରିବା ଉଚିତ maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

ଆବଶ୍ୟକ କିଗୁଡ଼ିକ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସାସ୍ ମାନଚିତ୍ରରେ କିଛି ନିର୍ଦ୍ଦିଷ୍ଟ କିଗୁଡ଼ିକର ଉପସ୍ଥିତି ଅନୁମାନ କରେ ଯେହେତୁ ଆମେ ଏହାକୁ ନିଜେ ବ୍ୟବହାର କରୁ ଏବଂ ବିସ୍ତାର କରୁ | ଯେହେତୁ ଆପଣ ଅନ୍ତର୍ଭୁକ୍ତ ମାନଚିତ୍ରଗୁଡ଼ିକୁ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତି, ଆପଣ ତ୍ରୁଟିର ସମ୍ମୁଖୀନ ହୋଇପାରନ୍ତି ଯେଉଁଠାରେ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସାସ୍ ମାନଚିତ୍ରର ଚାବି ବ୍ୟବହାର କରାଯାଏ |

ଉଦାହରଣ ସ୍ୱରୂପ, ଆମେ ଲିଙ୍କ୍, ବଟନ୍, ଏବଂ ଫର୍ମ ଷ୍ଟେଟସ୍ ପାଇଁ primary, successଏବଂ dangerକିଗୁଡ଼ିକୁ ବ୍ୟବହାର କରୁ | $theme-colorsଏହି ଚାବିଗୁଡ଼ିକର ମୂଲ୍ୟ ବଦଳାଇବା ଦ୍ୱାରା କ issues ଣସି ସମସ୍ୟା ଉପସ୍ଥାପିତ ହେବା ଉଚିତ ନୁହେଁ, କିନ୍ତୁ ସେଗୁଡିକ ଅପସାରଣ କରିବା ଦ୍ୱାରା ସାସ୍ ସଂକଳନ ସମସ୍ୟା ହୋଇପାରେ | ଏହି ପରିସ୍ଥିତିରେ, ଆପଣଙ୍କୁ ସାସ୍ କୋଡ୍ ସଂଶୋଧନ କରିବାକୁ ପଡିବ ଯାହା ସେହି ମୂଲ୍ୟଗୁଡ଼ିକର ବ୍ୟବହାର କରେ |

କାର୍ଯ୍ୟଗୁଡ଼ିକ

ରଙ୍ଗଗୁଡିକ |

ଆମ ପାଖରେ ଥିବା ସାସ୍ ମାନଚିତ୍ରଗୁଡିକ ପାଖରେ, ଥିମ୍ ରଙ୍ଗଗୁଡିକ ମଧ୍ୟ ଷ୍ଟାଣ୍ଡାଲୋନ୍ ଭେରିଏବଲ୍ ଭାବରେ ବ୍ୟବହାର କରାଯାଇପାରିବ $primary|

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

ବୁଟଷ୍ଟ୍ରାପ୍ tint-color()ଏବଂ shade-color()ଫଙ୍କସନ୍ ସହିତ ଆପଣ ରଙ୍ଗକୁ ହାଲୁକା କିମ୍ବା ଗା dark ଼ କରିପାରିବେ | ଏହି କାର୍ଯ୍ୟଗୁଡ଼ିକ ରଙ୍ଗକୁ କଳା କିମ୍ବା ଧଳା ରଙ୍ଗରେ ମିଶ୍ରଣ କରିବ, ସାସ୍ ର ଦେଶୀ lighten()ଏବଂ darken()କାର୍ଯ୍ୟଗୁଡ଼ିକ ପରି ନୁହେଁ ଯାହା ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପରିମାଣରେ ହାଲୁକା ପରିବର୍ତ୍ତନ କରିବ, ଯାହା ପ୍ରାୟତ the ଇପ୍ସିତ ପ୍ରଭାବକୁ ନେଇ ନଥାଏ |

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

ଅଭ୍ୟାସରେ, ଆପଣ ଫଙ୍କସନ୍ କୁ ଡାକିବେ ଏବଂ ରଙ୍ଗ ଏବଂ ଓଜନ ପାରାମିଟରରେ ପାସ୍ କରିବେ |

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

ରଙ୍ଗ ବିପରୀତ |

ୱେବ୍ ବିଷୟବସ୍ତୁ ଆକ୍ସେସିବିଲିଟି ଗାଇଡଲାଇନ (WCAG) ବିପରୀତ ଆବଶ୍ୟକତା ପୂରଣ କରିବାକୁ, ଲେଖକମାନେ ସର୍ବନିମ୍ନ ପାଠ୍ୟ ରଙ୍ଗ ବିପରୀତ 4.5: 1 ଏବଂ ସର୍ବନିମ୍ନ ଅଣ-ପାଠ୍ୟ ରଙ୍ଗର ବିପରୀତ 3: 1 ପ୍ରଦାନ କରିବା ଆବଶ୍ୟକ , ଖୁବ୍ କମ୍ ବ୍ୟତିକ୍ରମ ସହିତ |

ଏଥିରେ ସାହାଯ୍ୟ କରିବାକୁ, ଆମେ color-contrastବୁଟଷ୍ଟ୍ରାପରେ ଫଙ୍କସନ୍ ଅନ୍ତର୍ଭୁକ୍ତ କରିଛୁ | ନିର୍ଦ୍ଦିଷ୍ଟ ଆଧାର ରଙ୍ଗ ଉପରେ ଆଧାର କରି ଏକ ଆଲୋକ ( ), ଗା dark ( ) କିମ୍ବା କଳା ( ) ବିପରୀତ ରଙ୍ଗକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଫେରାଇବା ପାଇଁ ଏକ ରଙ୍ଗ ସ୍ପେସରେ ଆପେକ୍ଷିକ ଆଲୋକ ଉପରେ ଆଧାର କରି କଣ୍ଟ୍ରାସ ଥ୍ରେଶୋଲ୍ଡ ଗଣନା କରିବା ପାଇଁ ଏହା WCAG କଣ୍ଟ୍ରାସ ଅନୁପାତ ଆଲଗୋରିଦମ ବ୍ୟବହାର କରେ | ଏହି ଫଙ୍କସନ୍ ମିକ୍ସିନ୍ କିମ୍ବା ଲୁପ୍ ପାଇଁ ବିଶେଷ ଉପଯୋଗୀ ଯେଉଁଠାରେ ଆପଣ ଏକାଧିକ ଶ୍ରେଣୀ ସୃଷ୍ଟି କରୁଛନ୍ତି |sRGB#fff#212529#000

$theme-colorsଉଦାହରଣ ସ୍ୱରୂପ, ଆମ ମାନଚିତ୍ରରୁ ରଙ୍ଗ ସ୍ୱିଚ୍ ସୃଷ୍ଟି କରିବାକୁ :

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

ଏହାକୁ ଏକ-ଅଫ୍ କଣ୍ଟ୍ରାସ୍ ଆବଶ୍ୟକତା ପାଇଁ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରିବ:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

ଆମର ରଙ୍ଗ ମାନଚିତ୍ର କାର୍ଯ୍ୟଗୁଡ଼ିକ ସହିତ ଆପଣ ଏକ ମୂଳ ରଙ୍ଗ ମଧ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରିପାରିବେ:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

SVG କୁ ପଳାନ୍ତୁ |

ଏସ୍.ଭି.ଜି ବ୍ୟାକଗ୍ରାଉଣ୍ଡ୍ ପ୍ରତିଛବିଗୁଡିକ ପାଇଁ ଆମେ ଫଙ୍କସନ୍ ବ୍ୟବହାର escape-svgକରୁ | ଫଙ୍କସନ୍ ବ୍ୟବହାର କରିବାବେଳେ , ଡାଟା URI ଗୁଡିକ ଉଦ୍ଧୃତ ହେବା ଜରୁରୀ |<>#escape-svg

ଫଙ୍କସନ୍ ଗୁଡିକ ଯୋଡନ୍ତୁ ଏବଂ ବାହାର କରନ୍ତୁ |

CSS ଫଙ୍କସନ୍ ଗୁଡ଼ାଇବା ପାଇଁ ଆମେ addଏବଂ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରୁ | ଏହି କାର୍ଯ୍ୟଗୁଡ଼ିକର ମୂଳ ଉଦ୍ଦେଶ୍ୟ ହେଉଛି ଯେତେବେଳେ ଏକ “ଏକକହୀନ” ମୂଲ୍ୟ ଏକ ଅଭିବ୍ୟକ୍ତିରେ ପାସ୍ ହୁଏ ତ୍ରୁଟିରୁ ଦୂରେଇ ରହିବା | ଗାଣିତିକ ସଠିକ୍ ସତ୍ତ୍ୱେ ସମସ୍ତ ବ୍ରାଉଜରରେ ଏକ୍ସପ୍ରେସନ୍ ଭଳି ଏକ ତ୍ରୁଟି ଫେରସ୍ତ କରିବ |subtractcalc0calccalc(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);
}

ମିକ୍ସନ୍ସ |

ଆମର scss/mixins/ଡିରେକ୍ଟୋରୀରେ ଏକ ଟନ୍ ମିଶ୍ରଣ ଅଛି ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଶକ୍ତି ଅଂଶ ଏବଂ ଏହା ଆପଣଙ୍କ ନିଜ ପ୍ରୋଜେକ୍ଟରେ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରିବ |

ରଙ୍ଗ ଯୋଜନା

ମିଡିଆ ଜିଜ୍ଞାସା ପାଇଁ ଏକ ଶୋର୍ଥାଣ୍ଡ୍ ମିକ୍ସନ୍ , ଏବଂ କଷ୍ଟମ୍ ରଙ୍ଗ ସ୍କିମ୍ prefers-color-schemeପାଇଁ ସମର୍ଥନ ସହିତ ଉପଲବ୍ଧ |lightdark

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}