Коммуналь API

Коммуналь API - коммуналь класслар булдыру өчен Sass нигезендәге корал.

Бу биттә

Bootstrap инженериясе безнең файдалы API ярдәмендә ясала һәм Sass аша безнең файдалы класслар җыелмасын үзгәртү яки киңәйтү өчен кулланыла ала. Безнең файдалы API Sass карталары һәм төрле вариантлар белән класс гаиләләрен булдыру функцияләренә нигезләнгән. Әгәр дә сез Sass карталары белән таныш түгел икән, башлау өчен рәсми Sass документларын укыгыз .

Карта безнең барлык коммуналь хезмәтләрне үз эченә ала , $utilitiesсоңрак булса, сезнең махсус $utilitiesкарта белән берләштерелә. Коммуналь картада түбәндәге вариантларны кабул иткән файдалы төркемнәрнең төп исемлеге бар:

Вариант	Тип	Килешенгән кыйммәт	Тасвирлау
`property`	Кирәк	-	Мөлкәтнең исеме, бу тезмә яки тезмә массив булырга мөмкин (мәсәлән, горизонталь паддерлар яки кырлар).
`values`	Кирәк	-	Кыйммәтләр исемлеге, яки класс исеменең кыйммәт белән бертигез булуын теләмәсәгез. Карта `null`ачкычы буларак кулланылса, ул тупланмаган.
`class`	Ихтимал	нуль	Генерацияләнгән класс исеме. Әгәр дә тәэмин ителмәсә һәм `property`тезмәләр массивы булса, массивның `class`беренче элементына килешенеп торачак `property`.
`css-var`	Ихтимал	`false`	CSS кагыйдәләре урынына CSS үзгәрүчәннәрен булдыру өчен буле.
`local-vars`	Ихтимал	нуль	CSS кагыйдәләренә өстәп, җирле CSS үзгәрүчәннәр картасы.
`state`	Ихтимал	нуль	Псевдо-класс вариантлары исемлеге (мәсәлән, `:hover`яки `:focus`) ясарга.
`responsive`	Ихтимал	`false`	Responsаваплы класслар тудырылырга тиешлеген күрсәтүче буле.
`rfs`	Ихтимал	`false`	RFS белән сыеклыкны коткару өчен буле .
`print`	Ихтимал	`false`	Басма класслар ясарга кирәклеген күрсәтүче буле.
`rtl`	Ихтимал	`true`	Коммуналь хезмәт RTLда сакланырга тиешлеген күрсәтүче буле.

API аңлатты

$utilitiesБарлык файдалы үзгәрешләр безнең стиль таблицасында үзгәрүчәнгә өстәлә _utilities.scss. Коммуналь хезмәтләрнең һәр төркеме моңа охшаган:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Кайсысы түбәндәгеләрне чыгара:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Милек

Кирәкле propertyачкыч теләсә нинди ярдәм өчен куелырга тиеш, һәм анда дөрес CSS милеге булырга тиеш. Бу мөлкәт барлыкка килгән коммуналь кагыйдәләрдә кулланыла. classАчкыч калдырылганда, ул шулай ук класс исеме булып хезмәт итә . text-decorationКоммуналь хезмәтне карап чыгыйк :

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Чыгыш:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Кыйммәтләр

Генерацияләнгән класс исемнәрендә һәм кагыйдәләрендә valuesкүрсәтелгән өчен нинди кыйммәтләр кулланылырга тиешлеген күрсәтү өчен ачкычны кулланыгыз . propertyИсемлек яки карта булырга мөмкин (коммуналь хезмәтләрдә яки Sass үзгәрүчесендә).

Исемлек буларак, text-decorationкоммуналь хезмәтләр кебек :

values: none underline line-through

Карта буларак, opacityкоммуналь хезмәтләр кебек :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

Исемлекне яки картаны урнаштыручы Sass үзгәрүчесе буларак, безнең positionкоммуналь хезмәтләрдәге кебек :

values: $position-values

Класс

classCompыелган CSSда кулланылган класс префиксын үзгәртү вариантын кулланыгыз . Мәсәлән, үзгәрү .opacity-*өчен .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Чыгыш:

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

CSS үзгәрүчән коммуналь хезмәтләр

css-varБулан вариантын куегыз, һәм API гадәти кагыйдәләр trueурынына бирелгән селектор өчен җирле CSS үзгәрүчәннәрен барлыкка китерәчәк . property: valueКоммуналь хезмәтләребезгә игътибар .text-opacity-*итегез:

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Чыгыш:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }

Localирле CSS үзгәрүчәннәре

local-varsКоммуналь класс кагыйдәләре кысаларында җирле CSS үзгәрүчәннәрен барлыкка китерә торган Sass картасын күрсәтү вариантын кулланыгыз . Зинһар, онытмагыз, барлыкка килгән CSS кагыйдәләрендә шул җирле CSS үзгәрүләрен куллану өстәмә эш таләп итә ала. Мәсәлән, безнең .bg-*коммуналь хезмәтләргә игътибар итегез:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Чыгыш:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

Штатлар

stateПсевдо-класс вариацияләрен булдыру вариантын кулланыгыз . Псевдо-класслар үрнәге :hoverһәм :focus. Штатлар исемлеге бирелгәч, бу псевдо-класс өчен класс исемнәре ясала. Мисал өчен, каядыр караңгылыкны үзгәртү өчен, өстәгез state: hoverһәм сез .opacity-hover:hoverтупланган CSS-ка керерсез.

Берничә псевдо-класс кирәкме? Космос белән аерылган дәүләтләр исемлеген кулланыгыз : state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Чыгыш:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

Onsаваплы

Барлык нокталарда җаваплы коммуналь хезмәтләр (мәсәлән, ) булдыру өчен responsiveбулеаны өстәгез ..opacity-md-25

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Чыгыш:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

Басма

printВариантны эшләтеп җибәрү шулай ук басма өчен файдалы класслар тудырачак, алар @media print { ... }медиа соравы кысаларында гына кулланыла.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Чыгыш:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

Мөһимлек

API тарафыннан барлыкка китерелгән барлык коммуналь хезмәтләр !importantкомпонентларны һәм модификатор классларны теләгәнчә юкка чыгаруны тәэмин итәләр. Сез бу көйләнүне $enable-important-utilitiesүзгәрүчән белән глобаль рәвештә алыштыра аласыз (килешү буенча true).

API куллану

Коммуналь API-ның ничек эшләве белән таныш булганнан соң, үзегезнең классларны ничек өстәргә һәм безнең килешү программаларын үзгәртергә өйрәнегез.

Коммуналь хезмәтләрне кире кагарга

Шул ук ачкыч ярдәмендә булган коммуналь хезмәтләрне кире кагарга. Мисал өчен, сез өстәмә җаваплы ташып китү өчен файдалы класслар телисез икән, сез моны эшли аласыз:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Коммуналь хезмәтләр өстәгез

$utilitiesКилешү картасына яңа коммуналь хезмәтләр өстәргә мөмкин map-merge. Безнең кирәкле Sass файлларыгызны һәм _utilities.scssбашта импортланганнарыгызны тикшерегез, аннары map-mergeөстәмә ярдәм күрсәтү өчен кулланыгыз. cursorМисал өчен, монда өч кыйммәт белән җаваплы ярдәмне ничек өстәргә .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

Коммуналь хезмәтләрне үзгәртү

Килешү $utilitiesкартасында булган функцияләрне map-getһәм map-mergeфункцияләрне үзгәртегез. Түбәндәге мисалда без widthкоммуналь хезмәтләргә өстәмә кыйммәт өстибез. Башлангычтан башлап, map-mergeаннары нинди ярдәмне үзгәртергә теләгәнегезне күрсәтегез. Аннан , файдалы вариантларны һәм кыйммәтләрне үзгәртү һәм үзгәртү өчен , ояланган "width"картаны алыгыз .map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

Respаваплы булырга

Сез хәзерге вакытта килешү буенча җаваплы булмаган коммуналь хезмәтләр җыелмасы өчен җаваплы класслар эшли аласыз. Мәсәлән, borderдәресләрне җаваплы итү өчен:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

Бу хәзер һәрбер өзек өчен җаваплы вариацияләр .borderтудырачак .border-0. Сезнең ясалган CSS шулай булачак:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

Коммуналь хезмәтләрнең исемен үзгәртү

V4 инженерлык сагыну, яисә бүтән исем бирү конвенциясенә күнеккән? Коммуналь API classбирелгән бирелгән нәтиҗәләрнең нәтиҗәләрен кире кагу өчен кулланылырга мөмкин, мәсәлән, .ms-*коммуналь хезмәтләрне иске исемгә үзгәртү өчен .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Коммуналь хезмәтләрне бетерегез

Төркем ачкычын куеп, теләсә нинди коммуналь хезмәтләрне бетерегез null. Мәсәлән, безнең барлык widthкоммуналь хезмәтләрне бетерү өчен, а ясау $utilities map-mergeһәм эчендә өстәү "width": null.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

РТЛдагы ярдәмне бетерегез

Кайбер кыр очраклары RTL стилизациясен кыенлаштыра , мәсәлән, гарәп телендәге сызыклар. rtlШулай итеп, коммуналь хезмәтләр вариантны куеп, RTL чыгаруыннан ташланырга мөмкин false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Чыгыш:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Бу RTLSS removeконтроль күрсәтмәсе ярдәмендә RTLда бернәрсә дә чыгармый .