ସାସ୍ |
ଭେରିଏବଲ୍, ମାନଚିତ୍ର, ମିକ୍ସିନ୍, ଏବଂ କାର୍ଯ୍ୟଗୁଡ଼ିକର ଲାଭ ଉଠାଇବା ପାଇଁ ଆମର ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ ଯାହା ଆପଣଙ୍କୁ ଶୀଘ୍ର ନିର୍ମାଣ କରିବାରେ ଏବଂ ଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟକୁ କଷ୍ଟମାଇଜ୍ କରିବାରେ ସାହାଯ୍ୟ କରେ |
ଭେରିଏବଲ୍, ମାନଚିତ୍ର, ମିକ୍ସିନ୍, ଏବଂ ଅଧିକ ଲାଭ ଉଠାଇବାକୁ ଆମର ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |
ଫାଇଲ୍ ଗଠନ
ଯେତେବେଳେ ସମ୍ଭବ, ବୁଟଷ୍ଟ୍ରାପର ମୂଳ ଫାଇଲଗୁଡ଼ିକୁ ପରିବର୍ତ୍ତନ କରିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ | ସାସ୍ ପାଇଁ, ଏହାର ଅର୍ଥ ହେଉଛି ଆପଣଙ୍କର ନିଜସ୍ୱ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ତିଆରି କରିବା ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ କରେ ଯାହା ଦ୍ 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. 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/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 ଣସି ଭେରିଏବଲ୍ ପାଇଁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପୁନରାବୃତ୍ତି କରନ୍ତୁ |
ମାନଚିତ୍ର ଏବଂ ଲୁପ୍ |
ବୁଟଷ୍ଟ୍ରାପରେ ହାତଗଣତି ସାସ୍ ମାନଚିତ୍ର, ପ୍ରମୁଖ ମୂଲ୍ୟ ଯୁଗଳ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ଯାହା ସମ୍ବନ୍ଧୀୟ 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
| ସଚେତନ ରୁହନ୍ତୁ ତୁମେ ଏହାକୁ ଆମର ଆବଶ୍ୟକତା ଏବଂ ବିକଳ୍ପ ମଧ୍ୟରେ ସନ୍ନିବେଶ କରିବା ଉଚିତ:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// 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 2.0 ଆକ୍ସେସିବିଲିଟି ମାନାଙ୍କ ପୂରଣ କରିବାକୁ , ଲେଖକମାନେ ଅତି କମ୍ ବ୍ୟତିକ୍ରମ ସହିତ ଅତି କମରେ 4.5: 1 ର ବିପରୀତ ଅନୁପାତ ପ୍ରଦାନ କରିବା ଆବଶ୍ୟକ |
ବୁଟଷ୍ଟ୍ରାପରେ ଆମେ ଅନ୍ତର୍ଭୂକ୍ତ କରୁଥିବା ଏକ ଅତିରିକ୍ତ କାର୍ଯ୍ୟ ହେଉଛି ରଙ୍ଗ ବିପରୀତ କାର୍ଯ୍ୟ , color-contrast
। ନିର୍ଦ୍ଦିଷ୍ଟ ଆଧାର ରଙ୍ଗ ଉପରେ ଆଧାର କରି ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ଆଲୋକ ( ), ଗା dark ( ) କିମ୍ବା କଳା ( ) ବିପରୀତ ରଙ୍ଗକୁ ଫେରାଇବା ପାଇଁ ଏକ ରଙ୍ଗକ୍ଷେତ୍ରରେ ଆପେକ୍ଷିକ ଉଜ୍ଜ୍ୱଳତା ଉପରେ ଆଧାର କରି ବିପରୀତ ସୀମାକୁ ଗଣନା କରିବା ପାଇଁ ଏହା WCAG 2.0 ଆଲଗୋରିଦମ ବ୍ୟବହାର କରେ | ଏହି ଫଙ୍କସନ୍ ମିକ୍ସିନ୍ କିମ୍ବା ଲୁପ୍ ପାଇଁ ବିଶେଷ ଉପଯୋଗୀ ଯେଉଁଠାରେ ଆପଣ ଏକାଧିକ ଶ୍ରେଣୀ ସୃଷ୍ଟି କରୁଛନ୍ତି |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
ଏବଂ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରୁ | ଏହି କାର୍ଯ୍ୟଗୁଡ଼ିକର ମୂଳ ଉଦ୍ଦେଶ୍ୟ ହେଉଛି ଯେତେବେଳେ ଏକ “ଏକକହୀନ” ମୂଲ୍ୟ ଏକ ଅଭିବ୍ୟକ୍ତିରେ ପାସ୍ ହୁଏ ତ୍ରୁଟିରୁ ଦୂରେଇ ରହିବା | ଗାଣିତିକ ସଠିକ୍ ସତ୍ତ୍ୱେ ସମସ୍ତ ବ୍ରାଉଜରରେ ଏକ୍ସପ୍ରେସନ୍ ଭଳି ଏକ ତ୍ରୁଟି ଫେରସ୍ତ କରିବ |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);
}
ମିକ୍ସନ୍ସ |
ଆମର scss/mixins/
ଡିରେକ୍ଟୋରୀରେ ଏକ ଟନ୍ ମିଶ୍ରଣ ଅଛି ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଶକ୍ତି ଅଂଶ ଏବଂ ଏହା ଆପଣଙ୍କ ନିଜ ପ୍ରୋଜେକ୍ଟରେ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରିବ |
ରଙ୍ଗ ଯୋଜନା
ମିଡିଆ ଜିଜ୍ଞାସା ପାଇଁ ଏକ ଶୋର୍ଥାଣ୍ଡ୍ ମିକ୍ସନ୍ , ଏବଂ କଷ୍ଟମ୍ ରଙ୍ଗ ସ୍କିମ୍ prefers-color-scheme
ପାଇଁ ସମର୍ଥନ ସହିତ ଉପଲବ୍ଧ |light
dark
@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
}
}