Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

küstah

Daha hızlı oluşturmanıza ve projenizi özelleştirmenize yardımcı olacak değişkenlerden, haritalardan, karışımlardan ve işlevlerden yararlanmak için kaynak Sass dosyalarımızı kullanın.

Bu sayfada

Değişkenlerden, haritalardan, karışımlardan ve daha fazlasından yararlanmak için kaynak Sass dosyalarımızı kullanın.

dosya yapısı

Mümkün olduğunda, Bootstrap'in çekirdek dosyalarını değiştirmekten kaçının. Sass için bu, Bootstrap'i içe aktaran kendi stil sayfanızı oluşturmak anlamına gelir, böylece onu değiştirebilir ve genişletebilirsiniz. npm gibi bir paket yöneticisi kullandığınızı varsayarsak, şuna benzeyen bir dosya yapısına sahip olacaksınız:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Kaynak dosyalarımızı indirdiyseniz ve bir paket yöneticisi kullanmıyorsanız, Bootstrap'in kaynak dosyalarını kendinizden ayrı tutarak bu yapıya benzer bir şeyi manuel olarak oluşturmak isteyeceksiniz.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

içe aktarılıyor

dosyanızda custom.scssBootstrap'in kaynak Sass dosyalarını içe aktaracaksınız. İki seçeneğiniz var: tüm Bootstrap'i dahil edin veya ihtiyacınız olan parçaları seçin. İkincisini teşvik ediyoruz, ancak bileşenlerimiz arasında bazı gereksinimler ve bağımlılıklar olduğunu unutmayın. Ayrıca eklentilerimiz için biraz JavaScript eklemeniz gerekecek.

// 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";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts 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";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

Bu kurulum yerindeyken, dosyanızdaki Sass değişkenlerinden ve haritalarından herhangi birini değiştirmeye başlayabilirsiniz custom.scss. Ayrıca Bootstrap'in // Optionalbölümlerini gerektiği gibi bölümün altına eklemeye başlayabilirsiniz. bootstrap.scssBaşlangıç ​​noktanız olarak dosyamızdaki tam içe aktarma yığınını kullanmanızı öneririz .

Değişken varsayılanları

Bootstrap'teki her Sass değişkeni, Bootstrap'in !defaultkaynak kodunu değiştirmeden kendi Sass'ınızdaki değişkenin varsayılan değerini geçersiz kılmanıza izin veren bayrağı içerir. Değişkenleri gerektiği gibi kopyalayıp yapıştırın, değerlerini değiştirin ve !defaultbayrağı kaldırın. Bir değişken zaten atanmışsa, Bootstrap'taki varsayılan değerlerle yeniden atanmaz.

Bootstrap değişkenlerinin tam listesini scss/_variables.scss. Bazı değişkenler olarak ayarlanmıştır null, bu değişkenler, yapılandırmanızda geçersiz kılınmadıkça özelliğin çıktısını vermez.

Değişken geçersiz kılmalar, işlevlerimiz içe aktarıldıktan sonra, ancak geri kalan içe aktarmalardan önce gelmelidir.

Bootstrap'i npm yoluyla içe aktarırken ve derlerken background-colorve coloriçin değiştiren bir örnek :<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/maps";
@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

Aşağıdaki genel seçenekler de dahil olmak üzere Bootstrap'teki herhangi bir değişken için gerektiği kadar tekrarlayın.

Başlangıç ​​projemizle npm üzerinden Bootstrap ile başlayın! Bootstrap'i kendi npm projenizde nasıl oluşturacağınızı ve özelleştireceğinizi görmek için twbs/bootstrap-npm-starter şablon deposuna gidin. Sass derleyicisi, Autoprefixer, Stylelint, PurgeCSS ve Bootstrap Simgelerini içerir.

Haritalar ve döngüler

Bootstrap, ilgili CSS ailelerini oluşturmayı kolaylaştıran bir avuç Sass haritası, anahtar değer çifti içerir. Renklerimiz, ızgara kesme noktaları ve daha fazlası için Sass haritalarını kullanıyoruz. Tıpkı Sass değişkenleri gibi, tüm Sass haritaları !defaultbayrağı içerir ve geçersiz kılınabilir ve genişletilebilir.

Sass haritalarımızdan bazıları varsayılan olarak boş haritalarla birleştirilmiştir. Bu, belirli bir Sass haritasının kolayca genişletilmesine izin vermek için yapılır, ancak bir haritadan öğelerin kaldırılmasını biraz daha zor hale getirme pahasına gelir .

Haritayı değiştir

Haritadaki tüm değişkenler $theme-colorsbağımsız değişkenler olarak tanımlanır. Haritamızdaki mevcut bir rengi değiştirmek $theme-colorsiçin özel Sass dosyanıza aşağıdakini ekleyin:

$primary: #0074d9;
$danger: #ff4136;

Daha sonra bu değişkenler Bootstrap'ın $theme-colorsharitasında ayarlanır:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Haritaya ekle

$theme-colorsÖzel değerlerinizle yeni bir Sass haritası oluşturarak ve onu orijinal haritayla birleştirerek 'e veya başka bir haritaya yeni renkler ekleyin . Bu durumda, yeni bir $custom-colorsharita oluşturacağız ve onu ile birleştireceğiz $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Haritadan kaldır

Renkleri $theme-colorsveya başka bir haritadan kaldırmak için öğesini kullanın map-remove. $theme-colorsGereksinimlerimiz arasına, tanımından hemen sonra ve şuradaki variableskullanımından önce eklemeniz gerektiğini unutmayın maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

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

Gerekli anahtarlar

Bootstrap, kullandığımız gibi Sass haritalarında bazı özel anahtarların varlığını varsayar ve bunları kendimiz genişletir. Dahil edilen haritaları özelleştirirken, belirli bir Sass haritasının anahtarının kullanıldığı yerlerde hatalarla karşılaşabilirsiniz.

Örneğin, bağlantılar, düğmeler ve form durumları için primary, successve dangeranahtarlarını kullanırız. $theme-colorsBu anahtarların değerlerinin değiştirilmesi sorun yaratmamalıdır, ancak bunların kaldırılması Sass derleme sorunlarına neden olabilir. Bu durumlarda, bu değerleri kullanan Sass kodunu değiştirmeniz gerekecektir.

Fonksiyonlar

Renkler

Sahip olduğumuz Sass haritalarının yanında , tema renkleri de gibi bağımsız değişkenler olarak kullanılabilir $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Bootstrap tint-color()ve shade-color()fonksiyonları ile renkleri açık veya koyu hale getirebilirsiniz. Bu işlevler, Sass'ın doğal özelliğinden farklı olarak renkleri siyah veya beyazla karıştıracak lighten()ve darken()açıklığı sabit bir miktarda değiştirecek ve genellikle istenen etkiye yol açmayacaktır.

// 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));
}

Pratikte, işlevi çağırır ve renk ve ağırlık parametrelerini girersiniz.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Renk kontrastı

Web İçeriği Erişilebilirlik Yönergeleri (WCAG) kontrast gereksinimlerini karşılamak için yazarlar , çok az istisna dışında minimum metin rengi kontrastı 4,5:1 ve minimum metin dışı renk kontrastı 3:1 sağlamalıdır.

Buna yardımcı olmak için color-contrastBootstrap'a işlevi ekledik. Belirtilen temel renge dayalı olarak açık ( ), koyu ( ) veya siyah ( ) kontrast rengini otomatik olarak döndürmek için bir renk uzayındaki göreli parlaklığa dayalı kontrast eşiklerini hesaplamak için WCAG kontrast oranı algoritmasını kullanır . Bu işlev, özellikle birden çok sınıf oluşturduğunuz karışımlar veya döngüler için kullanışlıdır.sRGB#fff#212529#000

Örneğin, $theme-colorsharitamızdan renk örnekleri oluşturmak için:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Tek seferlik kontrast ihtiyaçları için de kullanılabilir:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Ayrıca renk haritası işlevlerimizle bir temel renk belirleyebilirsiniz:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

SVG'den Kaçış

SVG arka plan resimleri için , ve karakterlerinden escape-svgkaçmak için işlevi kullanırız . İşlevi kullanırken , veri URI'leri alıntılanmalıdır.<>#escape-svg

Ekleme ve Çıkarma işlevleri

CSS işlevini sarmak için ve addişlevlerini kullanırız . Bu işlevlerin birincil amacı, bir ifadeye "birimsiz" bir değer geçirildiğinde hataları önlemektir . Gibi ifadeler , matematiksel olarak doğru olmasına rağmen tüm tarayıcılarda bir hata döndürür.subtractcalc0calccalc(10px - 0)

Calc'ın geçerli olduğu örnek:

$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);
}

Calc'ın geçersiz olduğu örnek:

$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);
}

karışımlar

Dizinimiz scss/mixins/, Bootstrap'in parçalarına güç sağlayan ve kendi projenizde de kullanılabilen bir çok karışıma sahiptir.

Renk şemaları

prefers-color-schemeMedya sorgusu için light, dark, ve özel renk şemalarını destekleyen bir steno karışımı mevcuttur.

@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
  }
}