in English

ސާސް އެވެ

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

މި ޞަފްޙާގައެވެ

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

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

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

އެ ސެޓަޕް ޤާއިމުކޮށްފައި އޮތުމުން، ތިބާގެ ގައިވާ ސާސް ވެރިއޭބަލްތަކާއި މެޕްތަކުގެ ތެރެއިން އެއްވެސް އެއްޗެއް ބަދަލުކުރަން ފެށޭނެއެވެ 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/mixins";
@import "../node_modules/bootstrap/scss/root";

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

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

އަޅުގަނޑުމެންގެ ސްޓާޓަރ ޕްރޮޖެކްޓާއެކު npm މެދުވެރިކޮށް ބޫޓްސްޓްރެޕް އިން ފެށުން! އަމިއްލަ npm ޕްރޮޖެކްޓްގައި ބޫޓްސްޓްރެޕް ބިލްޑްކޮށް ކަސްޓަމައިޒް ކުރާނެ ގޮތް ބަލާލުމަށް twbs/bootstrap-npm-starter ޓެމްޕްލޭޓް ރިޕޮޒިޓަރީއަށް ދާށެވެ . ސާސް ކޮމްޕައިލަރ، އޮޓޯޕްރިފިކްސަރ، ސްޓައިލިންޓް، ޕާޖްސީއެސްއެސް، އަދި ބޫޓްސްޓްރަޕް އައިކޮންސް ހިމެނެއެވެ.

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

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

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

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

ކުލަތަކެވެ

އަޅުގަނޑުމެންނަށް ލިބިފައިވާ ސާސް މެޕްތަކުގެ ކައިރީގައި ، ތީމް ކުލަތައް ވެސް ސްޓެންޑަލޯން ވެރިއޭބަލްތަކެއްގެ ގޮތުގައި ބޭނުންކުރެވިދާނެ، ފަދައިން $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%);
}

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

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

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

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

އަޅުގަނޑުމެން ފަންކްޝަން ބޭނުންކުރަނީ , އަދި އެސްވީޖީ ބެކްގްރައުންޑް އިމޭޖްތަކަށް އަކުރުތައް 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
  }
}