ސާސް އެވެ

ވެރިއޭބަލްސް، މެޕްސް، މިކްސިންސް، އަދި އެހެނިހެން ކަންކަމުގެ ފައިދާ ނަގަން އަޅުގަނޑުމެންގެ ސޯސް ސާސް ފައިލްތައް ބޭނުން ކުރާށެވެ.

ފައިލް ސްޓްރަކްޗަރ

ކުރެވެން އޮތް ކޮންމެ ވަގުތެއްގައި ބޫޓްސްޓްރެޕްގެ ކޯރ ފައިލްތަކަށް ބަދަލު ގެނައުމުން ދުރުހެލިވާށެވެ. ސާސްއަށް އޭގެ މާނައަކީ ބޫޓްސްޓްރެޕް އިމްޕޯޓް ކުރާ އަމިއްލަ ސްޓައިލްޝީޓެއް އުފެއްދުމުން އެއަށް ބަދަލުކޮށް އެކްސްޓެންޑް ކުރެވޭނެ އެވެ. 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

އެ ސެޓަޕް ޤާއިމުކޮށްފައި އޮތުމުން، ތިބާގެ ގައިވާ ސާސް ވެރިއޭބަލްތަކާއި މެޕްތަކުގެ ތެރެއިން އެއްވެސް އެއްޗެއް ބަދަލުކުރަން ފެށޭނެއެވެ custom.scss. // Optionalއަދި ބޭނުންވާ ގޮތަށް ބައިގެ ދަށުން ބޫޓްސްޓްރެޕްގެ ބައިތައް އިތުރުކުރަން ފަށައިގަނެވޭނެއެވެ . އަޅުގަނޑުމެން ލަފާދެނީ އަޅުގަނޑުމެންގެ bootstrap.scssފައިލްއިން ފުލް އިމްޕޯޓް ސްޓޭކް ތިޔަބޭފުޅުންގެ ފެށޭ ހިސާބެއްގެ ގޮތުގައި ބޭނުންކުރުމަށެވެ.

ވެރިއޭބަލް ޑިފޯލްޓްސް

ބޫޓްސްޓްރެޕްގައިވާ ކޮންމެ ސާސް ވެރިއޭބަލްއެއްގައި !defaultބޫޓްސްޓްރެޕްގެ ސޯސް ކޯޑަށް ބަދަލު ނުކޮށް އަމިއްލަ ސާސްގައި ވެރިއޭބަލްގެ ޑިފޯލްޓް ވެލިއު އޯވަރރައިޑް ކުރުމުގެ ފުރުސަތު ލިބޭ ފްލެގް ހިމެނެއެވެ. ބޭނުންވާ ގޮތަށް ވެރިއޭބަލްތައް ކޮޕީކޮށް ޕޭސްޓްކޮށް، އެތަކެތީގެ އަގުތައް ބަދަލުކޮށް، !defaultފްލެގް ނައްތާލާށެވެ. މިހާރުވެސް ވެރިއޭބަލްއެއް ޙަވާލުކުރެވިފައިވާނަމަ، ބޫޓްސްޓްރެޕްގައިވާ ޑިފޯލްޓް ވެލިއުތަކުން އަލުން އެސައިން ނުކުރެވޭނެއެވެ.

ބޫޓްސްޓްރެޕްގެ ވެރިއޭބަލްތަކުގެ ފުރިހަމަ ލިސްޓް އިން ފެނިވަޑައިގަންނަވާނެއެވެ 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

ތިރީގައިވާ ގްލޯބަލް އޮޕްޝަންތައް ހިމެނޭ ގޮތަށް ބޫޓްސްޓްރެޕްގައި ހުންނަ ކޮންމެ ވެރިއޭބަލަކަށް ބޭނުންވާ ގޮތަށް ތަކުރާރު ކުރާށެވެ.

މެޕްތަކާއި ލޫޕްތަކެވެ

ބޫޓްސްޓްރަޕްގައި ހިމެނެނީ އަތްމަތި ދަތި ސާސް މެޕްތަކާއި، ގުޅުންހުރި ސީއެސްއެސްތަކުގެ އާއިލާތައް އުފެއްދުމަށް ފަސޭހަކޮށްދޭ ކީ ވެލިއު ޕެއާތަކެކެވެ. އަޅުގަނޑުމެންގެ ކުލަތަކާއި، ގްރިޑް ބްރޭކްޕޮއިންޓްތަކާއި، އަދި އެހެނިހެން ކަންކަމަށް އަޅުގަނޑުމެން ސާސް މެޕްސް ބޭނުންކުރަމެވެ. ހަމަ ސާސް ވެރިއޭބަލްތަކެކޭ އެއްފަދައިން ސާސްގެ ހުރިހާ މެޕްތަކެއްގައި ވެސް !defaultފްލެގް ހިމެނޭއިރު، އޯވަރރައިޑްކޮށް އެކްސްޓެންޑް ކުރެވޭނެއެވެ.

އަޅުގަނޑުމެންގެ ބައެއް ސާސް މެޕްތައް ޑިފޯލްޓްކޮށް ހުސް މެޕްތަކަށް އެއްކޮށްފައި ހުރެއެވެ. މިއީ ދީފައިވާ ސާސް މެޕެއް ފަސޭހައިން ފުޅާކުރުމުގެ ފުރުސަތު ދިނުމަށްޓަކައި ކުރާ ކަމެއް ނަމަވެސް މިއީ މެޕަކުން ތަކެތި ނައްތާލުމަށް ތަންކޮޅެއް އުނދަގޫ ކުރުމަށް ޚަރަދުވާ ކަމެއް ކަމަށް ވެސް ވިދާޅުވި އެވެ.

މެޕް ބަދަލުކުރުން

މެޕްގައިވާ ހުރިހާ ވެރިއޭބަލްތަކެއް $theme-colorsކަނޑައެޅިފައިވަނީ ސްޓެންޑަލޯން ވެރިއޭބަލްތަކެއްގެ ގޮތުގައެވެ. އަޅުގަނޑުމެންގެ $theme-colorsމެޕްގައި މިހާރު ހުރި ކުލައެއް ބަދަލުކުރުމަށްޓަކައި، ކަސްޓަމް ސާސް ފައިލަށް ތިރީގައިވާ ތަކެތި އިތުރުކުރައްވާށެވެ.

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

ފަހުން މި ވެރިއޭބަލްތައް ބޫޓްސްޓްރަޕްގެ $theme-colorsމެޕްގައި ސެޓް ކުރެވެއެވެ:

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

މެޕަށް އިތުރުކުރުން

$theme-colorsތިބާގެ ކަސްޓަމް ވެލިއުތަކާއެކު އާ ސާސް މެޕެއް އުފައްދައި، އަސްލު މެޕާ އެއްކޮށްލައިގެން , ނުވަތަ އެހެން މެޕަށް އާ ކުލަތައް އިތުރުކުރުން . މި ހާލަތުގައި އަޅުގަނޑުމެން އާ $custom-colorsމެޕެއް އުފައްދައިގެން އެ މެޕް އާއި އެއްކޮށްލާނަމެވެ $theme-colors.

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

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

މެޕުން ނަގާށެވެ

އިން ކުލަތައް ނައްތާލުމަށް $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މި ކީތަކުގެ އަގުތައް ބަދަލުކުރުމުން އެއްވެސް މައްސަލައެއް ކުރިމަތި ނުވާނެ ކަމަށާއި، ނަމަވެސް އެ ކީތައް ނައްތާލުމުން ސާސް ކޮމްޕައިލޭޝަން މައްސަލަތައް ކުރިމަތިވެދާނެ ކަމަށެވެ. މި ހާލަތްތަކުގައި، އެ އަގުތަކުގެ ބޭނުން ހިފާ ސާސް ކޯޑް ބަދަލުކުރަން ޖެހޭނެއެވެ.

ފަންކްޝަންސް

ކުލަތަކެވެ

އަޅުގަނޑުމެންނަށް ލިބިފައިވާ ސާސް މެޕްތަކުގެ ކައިރީގައި ، ތީމް ކުލަތައް ވެސް ސްޓެންޑަލޯން ވެރިއޭބަލްތަކެއްގެ ގޮތުގައި ބޭނުންކުރެވިދާނެ، ފަދައިން $primary.

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

tint-color()ބޫޓްސްޓްރެޕްސް އާއި shade-color()ފަންކްޝަންތަކުން ކުލަތައް އަލިކޮށް ނުވަތަ އަނދިރިކޮށްލެވޭނެ އެވެ . މި ފަންކްޝަންތަކުން ކުލަތައް ކަޅު ނުވަތަ ހުދު ކުލަ އެއްކޮށްލާނީ ސާސްގެ ނެޓިވް lighten()އާއި ހިލާފަށް އަދި darken()ވަކި މިންވަރަކަށް ލުއިކަން ބަދަލުކޮށްލާ ފަންކްޝަންތަކުން ގިނަ ފަހަރަށް އެދެވޭ އަސަރެއް ނުކުރާ ފަންކްޝަންތަކުންނެވެ.

// 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%);
}

ކުލަ ތަފާތުވުން

ވެބް ކޮންޓެންޓް އެކްސެސިބިލިޓީ ގައިޑްލައިންސް (ޑަބްލިޔުސީއޭޖީ) ކޮންޓްރެސްޓް ޝަރުތުތައް ފުރިހަމަ ކުރުމަށްޓަކައި، ލިޔުންތެރިން ވަރަށް މަދު އިސްތިސްނާތަކެއް ފިޔަވައި، އެންމެ ކުޑަމިނުން ޓެކްސްޓް ކުލަ ކޮންޓްރެސްޓް 4.5:1 އަދި އެންމެ ކުޑަމިނުން ނޮން ޓެކްސްޓް ކުލަ ކޮންޓްރެސްޓް 3:1 ފޯރުކޮށްދޭންވާނެއެވެ.

މިކަމަށް އެހީތެރިވުމަށްޓަކައި އަޅުގަނޑުމެން color-contrastބޫޓްސްޓްރެޕްގައި ފަންކްޝަން ހިމަނާލީމެވެ. އެއީ ކަނޑައެޅިފައިވާ ބޭސް ކުލައަށް ބަލައިގެން އޮޓޮމެޓިކުން އަލި ( )، އަނދިރި ( ) ނުވަތަ ކަޅު ( ) ކޮންޓްރެސްޓް ކުލައެއް އަނބުރާ ދިނުމަށް ކުލަ ޖާގައެއްގައި ރިލޭޓިވް ލޫމިނަންސްއަށް ބިނާކޮށް ކޮންޓްރެސްޓް ތްރެޝްހޯލްޑްތައް ކަނޑައެޅުމަށް ޑަބްލިޔުސީއޭޖީ ކޮންޓްރެސްޓް ރޭޝިއޯ އެލްގޮރިޒަމް ބޭނުންކޮށްގެންނެވެ. މި ފަންކްޝަނަކީ ޚާއްޞަކޮށް ގިނަ ކްލާސްތަކެއް އުފައްދާ މިކްސިންސް ނުވަތަ ލޫޕްތަކަށް ބޭނުންތެރި ފަންކްޝަނެކެވެ.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`
}

އެސްވީޖީން ފިލައިގެން ދިއުމެވެ

އަޅުގަނޑުމެން ފަންކްޝަން ބޭނުންކުރަނީ , އަދި އެސްވީޖީ ބެކްގްރައުންޑް އިމޭޖްތަކަށް އަކުރުތައް escape-svgފިލައިގެން ދިއުމަށްޓަކައެވެ . މި ފަންކްޝަން ބޭނުންކުރާއިރު ޑޭޓާ ޔޫއާރްއައިތައް ކޯޓް ކުރަން ޖެހެއެވެ.<>#escape-svg

އެޑް އަދި ސަބްޓްރެކްޓް ފަންކްޝަންތައް

އަޅުގަނޑުމެން ސީއެސްއެސް ފަންކްޝަން ރެޕް ކުރުމަށް ބޭނުންކުރަނީ addއަދި ފަންކްޝަންސް އެވެ . މި ފަންކްޝަންތަކުގެ އަސާސީ މަޤްޞަދަކީ “ޔުނިޓް ނެތް” އަގެއް އެކްސްޕްރެޝަނަކަށް ފޮނުވުމުން ގޯސްތަކުން ސަލާމަތްވުމެވެ. އެކްސްޕްރެޝަންސް ލައިކް އިން ހިސާބުގެ ގޮތުން ރަނގަޅު ނަމަވެސް ހުރިހާ ބްރައުޒާތަކެއްގައި އެރަރ އެއް ލިބޭނެއެވެ.subtractcalc0calccalc(10px - 0)

ކެލްކް ޞައްޙަވާ މިސާލު:

$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);
}

ކެލްކް ސައްހަ ނޫން ތަނެއްގެ މިސާލު:

$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
  }
}