ތީމިންގ ބޫޓްސްޓްރެޕް އެވެ

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

ތަޢާރަފު

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

މިހާރު، ތީމިންގ ފުރިހަމަ ކުރެވެނީ ސާސް ވެރިއޭބަލްސް، ސާސް މެޕްސް، އަދި ކަސްޓަމް ސީއެސްއެސް އިންނެވެ. އިތުރަށް ޚާއްޞަ ތީމް ސްޓައިލްޝީޓެއް ނެތެވެ؛ އޭގެ ބަދަލުގައި ބިލްޓް-އިން ތީމް އިން ގްރޭޑިއަންޓްސް، ޝެޑޯސް، އަދި އެހެނިހެން ކަންކަން އިތުރުކުރުމަށް އެނެބަލް ކުރެވިދާނެއެވެ.

ސާސް އެވެ

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

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

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

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

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

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

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

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

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

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

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

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

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

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

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

އަށް އާ ކުލައެއް $theme-colorsއިތުރުކުރުމަށްޓަކައި، އާ ކީ އާއި އަގު އިތުރުކުރުން:

$theme-colors: (
  "custom-color": #900
);

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

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

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

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

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

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

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

ސާސް އޮޕްޝަންސް އެވެ

އަޅުގަނޑުމެންގެ ބިލްޓް-އިން ކަސްޓަމް ވެރިއޭބަލްސް ފައިލް އިން ބޫޓްސްޓްރެޕް 4 ކަސްޓަމައިޒްކޮށް، އާ $enable-*ސާސް ވެރިއޭބަލްތަކާއެކު ފަސޭހައިން ގްލޯބަލް ސީއެސްއެސް ޕްރެފެރެންސްތައް ޓޮގްލް ކުރެވޭނެއެވެ. ވެރިއޭބަލްއެއްގެ އަގު އޯވަރރައިޑްކޮށް ބޭނުންވާ ގޮތަށް އަލުން ކޮމްޕައިލް ކުރާށެވެ npm run test.

މި ވެރިއޭބަލްތައް ހޯދައި ކަސްޓަމައިޒް ކުރެވޭނީ މުހިއްމު ގްލޯބަލް އޮޕްޝަންތަކަށް ބޫޓްސްޓްރެޕްގެ scss/_variables.scssފައިލް އިންނެވެ.

ކުލަ

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

ހުރިހާ ކުލައެއް

ބޫޓްސްޓްރެޕް 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;

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

ކޮމްޕޯނެންޓްސް

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

މޮޑިފައިއަރސް އެވެ

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

ސީއެސްއެސް ވެރިއޭބަލްސް އެވެ

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

ލިބެންހުރި ވެރިއޭބަލްސް

މިއީ އަޅުގަނޑުމެން ހިމަނާފައިވާ ވެރިއޭބަލްތައް (ނޯޓް ދަ :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;
}

މިސާލުތަކެވެ

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

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ބްރޭކްޕޮއިންޓް ވެރިއޭބަލްސް

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

މިއީ ސަޕޯޓް ނުކުރާ ކަންކަމުގެ މިސާލެކެވެ :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

އަދި މިއީ ތާއީދުކުރާ ކަންކަމުގެ މިސާލެކެވެ :

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}