A yɔrɔw

Base kalanw

Bootstrap ka yɔrɔw bɛ jɔ kosɛbɛ ni basigi-modifiyɛri tɔgɔladonni ye. An bɛ nafolomafɛnw tila-tila caman fara ɲɔgɔn kan ka kɛ basigi kalasi ye, i n’a fɔ .btn, ka sɔrɔ ka cogoya kelen-kelenw fara ɲɔgɔn kan fɛn caman ɲɔgɔnna kelen-kelen bɛɛ la ka kɛ fɛn caman sɛmɛntiyalanw ye, i n’a fɔ .btn-primarywalima .btn-success.

Walasa k’an ka modifier classes (daɲɛw sɛmɛntiyalanw) jɔ, an bɛ baara kɛ ni Sass ka @eachloops ye walasa ka iterate kɛ Sass karti kan. O bɛ dɛmɛ kɛrɛnkɛrɛnnenya la ka ɲɛsin fɛn dɔ ka fɛn caman ɲɔgɔnnabɔli ma an fɛ $theme-colorsani ka fɛn caman ɲɔgɔnna jaabiw dilan kariyɔrɔ kelen-kelen bɛɛ la. Ni i bɛ nin Sass kartiw ladilan ani ka u labɛn kokura, i bɛna i yɛrɛ ye i ka fɛn caman Changements (Yɛlɛma) bɛ jira nin loops (lupulu) ninnu na.

Aw ye an ka Sass kartiw ni loops docs lajɛ walasa ka nin loop ninnu labɛncogo dɔn ani ka Bootstrap ka base-modifier fɛɛrɛ janya ka se aw yɛrɛ ka kode ma.

Fɛn minnu bɛ fɛn caman sɛmɛntiya

Bootstrap ka yɔrɔ caman bɛ jɔ ni base-modifier class approach ye. O kɔrɔ ye ko cogoya fanba bɛ sɔrɔ basigi kalasi dɔ la (misali la, .btn) k’a sɔrɔ cogoya caman ɲɔgɔnna bɛ dan fɛn caman sɛmɛntiyalanw ma (misali la, .btn-danger). O bεε lajɛlen bε jɔ ka Bɔ $theme-colorskarti la walasa ka an ka bεnkansεbεn kalasi hakɛ n’a tɔgɔ bεε Labɛn.

$theme-colorsAn bɛ loop cogo min na karti kan walasa ka modifiers (daɲɛw) Lawuli ka ɲɛsin .alertani .list-groupcomponents (yɔrɔw) ma , misali fila filɛ nin ye .

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Jaabiw

Nin Sass loop ninnu tɛ dan kulɛri kartiw dɔrɔn ma, olu fana. Aw bɛ se fana ka jaabiw caman ɲɔgɔnna caman lawuli aw ka yɔrɔw la. An ka misali ta an ka jaabi-labɛnni na dropdowns (daɲɛw) minnu na an bɛ @eachloop (lupulu) dɔ ɲagami $grid-breakpointsSass karti la ni media query (media ɲininkali) dɔ ye.

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

Ni i ka kan ka i ka $grid-breakpoints, i ka fɛn caman Changer (Yɛlɛma) bɛna kɛ ka ɲɛsin loop bɛɛ ma minnu bɛ segin-ka-bɔ o karti kan.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Walasa ka kunnafoni wɛrɛw sɔrɔ ani misaliw an ka Sass kartiw ni fɛn caman sɛmɛntiyacogo kan, aw bɛ Sass yɔrɔ lajɛ Grid sɛbɛnw kɔnɔ .

Ka i yɛrɛ ta da

An b’aw jija aw ka nin laadilikanw ta ni aw bɛ so jɔ ni Bootstrap ye walasa k’aw yɛrɛ ka yɔrɔw dilan. An yɛrɛ ye nin fɛɛrɛ in Lasegin ka Se ladamu yɔrɔw ma an ka sɛbɛnw ni misaliw kɔnɔ. Components (dakunw) i n’a fɔ an ka callouts (fɔlikanw) bɛ jɔ i n’a fɔ an ka components (yɔrɔw) minnu dira ni basigi ni modifier classes (daɲɛw sɛmɛntiyalanw) ye.

<div class="callout">...</div>

I ka CSS kɔnɔ, i tun bɛna fɛn dɔ sɔrɔ i n’a fɔ nin yɔrɔ in na yɔrɔ min na styling fanba bɛ kɛ via .callout. O kɔ fɛ, cogoya kɛrɛnkɛrɛnnen minnu bɛ ɲɔgɔndan kelen-kelen bɛɛ ni ɲɔgɔn cɛ, olu bɛ Kɔrɔsi modifier class fɛ.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

Weelekanw kama, o cogoya ɲɔgɔn tɛ min na, o ye border-left-color. N'i y'o basigi-kalanso in Fàra ɲɔgɔn kan ni o 'kɔnɔ-kalanso dɔ ye, i b'i ka 'kùnnafoni-falen-falen-falen-falen Sɔrɔ: