Yardımcı Program API'sı

Yardımcı program API'si, yardımcı program sınıfları oluşturmak için Sass tabanlı bir araçtır.

Bu sayfada

Önyükleme yardımcı programları, yardımcı program API'miz ile oluşturulur ve Sass aracılığıyla varsayılan yardımcı program sınıflarımızı değiştirmek veya genişletmek için kullanılabilir. Yardımcı program API'miz, çeşitli seçeneklere sahip sınıf aileleri oluşturmak için bir dizi Sass haritasına ve işlevine dayanmaktadır. Sass haritalarına aşina değilseniz, başlamak için resmi Sass belgelerini okuyun .

Harita tüm yardımcı programlarımızı içerir ve daha sonra varsa $utilitiesözel haritanızla birleştirilir . $utilitiesYardımcı program haritası, aşağıdaki seçenekleri kabul eden yardımcı program gruplarının anahtarlı bir listesini içerir:

Seçenek	Tip	Varsayılan değer	Tanım
`property`	Gerekli	-	Özelliğin adı, bu bir dize veya bir dizi dize olabilir (örneğin, yatay dolgular veya kenar boşlukları).
`values`	Gerekli	-	Değerler listesi veya sınıf adının değerle aynı olmasını istemiyorsanız bir harita. Harita `null`anahtarı olarak kullanılırsa derlenmez.
`class`	İsteğe bağlı	hükümsüz	Oluşturulan sınıfın adı. Sağlanmadıysa ve `property`bir dizi diziyse, dizinin `class`ilk öğesi varsayılan olacaktır `property`.
`css-var`	İsteğe bağlı	`false`	Boolean, CSS kuralları yerine CSS değişkenleri oluşturmak için.
`local-vars`	İsteğe bağlı	hükümsüz	CSS kurallarına ek olarak oluşturulacak yerel CSS değişkenlerinin haritası.
`state`	İsteğe bağlı	hükümsüz	Oluşturulacak sözde sınıf değişkenlerinin listesi (örneğin, `:hover`veya `:focus`).
`responsive`	İsteğe bağlı	`false`	Boole, duyarlı sınıfların oluşturulması gerekip gerekmediğini gösterir.
`rfs`	İsteğe bağlı	`false`	RFS ile akışkan yeniden ölçeklendirmeyi etkinleştirmek için Boole .
`print`	İsteğe bağlı	`false`	Boolean, yazdırma sınıflarının oluşturulması gerekip gerekmediğini gösterir.
`rtl`	İsteğe bağlı	`true`	Boole, yardımcı programın RTL'de tutulması gerekip gerekmediğini gösterir.

API açıkladı

Tüm yardımcı değişkenler, stil $utilitiessayfamızdaki değişkene eklenir . _utilities.scssHer bir yardımcı program grubu şuna benzer:

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

Hangisi aşağıdaki çıktıyı verir:

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

Mülk

Herhangi bir yardımcı program için gerekli propertyanahtar ayarlanmalı ve geçerli bir CSS özelliği içermelidir. Bu özellik, oluşturulan yardımcı programın kural kümesinde kullanılır. Anahtar atlandığında , classvarsayılan sınıf adı olarak da işlev görür. Yardımcı programı düşünün text-decoration:

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

Çıktı:

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

değerler

Oluşturulan sınıf adlarında ve kurallarında valuesbelirtilen için hangi değerlerin kullanılması gerektiğini belirtmek için anahtarı kullanın . propertyBir liste veya harita olabilir (yardımcı programlarda veya bir Sass değişkeninde ayarlanır).

Bir liste olarak, text-decorationyardımcı programlarda olduğu gibi :

values: none underline line-through

Bir harita olarak, opacityyardımcı programlarda olduğu gibi :

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

positionYardımcı programlarımızda olduğu gibi listeyi veya haritayı ayarlayan bir Sass değişkeni olarak :

values: $position-values

Sınıf

classDerlenmiş CSS'de kullanılan sınıf önekini değiştirmek için seçeneği kullanın . Örneğin, ile değiştirmek .opacity-*için .o-*:

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

Çıktı:

.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 değişken yardımcı programları

css-varBoole seçeneğini olarak ayarlayın ve API, verilen seçici için olağan kurallar trueyerine yerel CSS değişkenleri üretecektir . Yardımcı programlarımızı property: valuedüşünün :.text-opacity-*

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

Çıktı:

.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; }

Yerel CSS değişkenleri

local-varsYardımcı program sınıfının kural kümesi içinde yerel CSS değişkenleri oluşturacak bir Sass haritası belirleme seçeneğini kullanın . Oluşturulan CSS kurallarında bu yerel CSS değişkenlerini kullanmanın ek çalışma gerektirebileceğini lütfen unutmayın. Örneğin, .bg-*yardımcı programlarımızı düşünün:

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

Çıktı:

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

Devletler

stateSözde sınıf varyasyonları oluşturma seçeneğini kullanın . Örnek sözde sınıflar :hoverve :focus. Bir durum listesi sağlandığında, sözde sınıf için sınıf adları oluşturulur. Örneğin, fareyle üzerine gelindiğinde opaklığı değiştirmek için ekleyin ve derlenmiş CSS'nizi state: hoveralırsınız ..opacity-hover:hover

Birden fazla sözde sınıfa mı ihtiyacınız var? Boşlukla ayrılmış bir durum listesi kullanın: state: hover focus.

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

Çıktı:

.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; }

Duyarlı

Tüm kesme noktalarında duyarlı yardımcı programlar (ör. ) responsiveoluşturmak için boole ekleyin ..opacity-md-25

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

Çıktı:

.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; }
}

Yazdır

printSeçeneğin etkinleştirilmesi, yazdırma için yalnızca ortam sorgusu içinde uygulanan yardımcı program sınıfları da oluşturur.@media print { ... }

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

Çıktı:

.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; }
}

Önem

API tarafından oluşturulan tüm yardımcı programlar, !importantbileşenleri ve değiştirici sınıfları amaçlandığı gibi geçersiz kılmalarını sağlar. Bu ayarı genel olarak $enable-important-utilitiesdeğişkenle (varsayılan olarak true) değiştirebilirsiniz.

API'yi kullanma

Artık yardımcı program API'sinin nasıl çalıştığını öğrendiğinize göre, kendi özel sınıflarınızı nasıl ekleyeceğinizi ve varsayılan yardımcı programlarımızı nasıl değiştireceğinizi öğrenin.

Yardımcı programları geçersiz kıl

Aynı anahtarı kullanarak mevcut yardımcı programları geçersiz kılın. Örneğin, ek duyarlı taşma yardımcı program sınıfları istiyorsanız, bunu yapabilirsiniz:

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

Yardımcı programlar ekle

Yeni yardımcı programlar varsayılan $utilitiesharitaya bir map-merge. _utilities.scssÖnce gerekli Sass dosyalarımızın içe aktarıldığından emin olun , ardından map-mergeek yardımcı programlarınızı eklemek için öğesini kullanın. Örneğin, cursorüç değerle duyarlı bir yardımcı programın nasıl ekleneceği aşağıda açıklanmıştır.

@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,
    )
  )
);

Yardımcı programları değiştir

$utilitiesVarsayılan haritadaki mevcut yardımcı programları map-getve map-mergeişlevleriyle değiştirin. Aşağıdaki örnekte, yardımcı programlara ek bir değer ekliyoruz width. Baş harfiyle başlayın map-mergeve ardından hangi yardımcı programı değiştirmek istediğinizi belirtin. Oradan , yardımcı programın seçeneklerine ve değerlerine erişmek ve bunları değiştirmek için iç içe "width"haritayı getirin.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%),
        ),
      ),
    ),
  )
);

Duyarlılığı etkinleştir

Şu anda varsayılan olarak yanıt vermeyen mevcut bir yardımcı program kümesi için duyarlı sınıfları etkinleştirebilirsiniz. Örneğin, bordersınıfları duyarlı hale getirmek için:

@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 ),
    ),
  )
);

Bu artık her kesme noktası için .borderve için duyarlı varyasyonlar üretecektir. .border-0Oluşturulan CSS'niz şöyle görünecek:

.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 { ... }
}

Yardımcı programları yeniden adlandır

Eksik v4 yardımcı programları mı yoksa başka bir adlandırma kuralına mı alışkınsınız? Yardımcı programlar API'si, belirli bir yardımcı programın sonucunu geçersiz kılmak için kullanılabilir; classörneğin, .ms-*yardımcı programları oldish olarak yeniden adlandırmak için .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 ),
    ),
  )
);

Yardımcı programları kaldır

Grup anahtarını olarak ayarlayarak varsayılan yardımcı programlardan herhangi birini kaldırın null. Örneğin, tüm widthyardımcı programlarımızı kaldırmak için bir oluşturun $utilities map-mergeve içine ekleyin "width": null.

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

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

RTL'deki yardımcı programı kaldır

Arapça satır sonları gibi bazı uç durumlar, RTL stilini zorlaştırır . rtlBöylece, seçenek şu şekilde ayarlanarak yardımcı programlar RTL çıkışından çıkarılabilir false:

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

Çıktı:

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

Bu , RTLCSS removekontrol yönergesi sayesinde RTL'de herhangi bir çıktı vermez .