Tema Önyükleme

Kolay tema ve bileşen değişiklikleri için global stil tercihleri ​​için Bootstrap 4'ü yeni yerleşik Sass değişkenlerimizle özelleştirin.

giriiş

Bootstrap 3'te tema oluşturma, büyük ölçüde LESS'deki değişken geçersiz kılmalar, özel CSS ve distdosyalarımıza eklediğimiz ayrı bir tema stil sayfası tarafından yönlendiriliyordu. Biraz çabayla, çekirdek dosyalara dokunmadan Bootstrap 3'ün görünümünü tamamen yeniden tasarlayabilirsiniz. Bootstrap 4, tanıdık, ancak biraz farklı bir yaklaşım sağlar.

Artık tema oluşturma, Sass değişkenleri, Sass haritaları ve özel CSS tarafından gerçekleştirilir. Artık özel bir tema stil sayfası yok; bunun yerine, degradeler, gölgeler ve daha fazlasını eklemek için yerleşik temayı etkinleştirebilirsiniz.

küstah

Sass'ı kendi varlık hattınızı kullanarak derlerken 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 kurmak 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";
@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";

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, değişkenlerimiz ve karışımlarımız 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>

@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

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

Haritalar ve döngüler

Bootstrap 4, ilgili CSS ailelerini oluşturmayı kolaylaştıran bir dizi 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

Haritamızdaki mevcut bir rengi değiştirmek $theme-colorsiçin özel Sass dosyanıza aşağıdakini ekleyin:

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

Haritaya ekle

öğesine yeni bir renk $theme-colorseklemek için yeni anahtarı ve değeri ekleyin:

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

Haritadan kaldır

Renkleri $theme-colorsveya başka bir haritadan kaldırmak için öğesini kullanın map-remove. Gereksinimlerimiz ve seçeneklerimiz arasına eklemeniz gerektiğini unutmayın:

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

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

Bootstrap birkaç Sass işlevi kullanır, ancak genel temaya yalnızca bir alt küme uygulanabilir. Renk haritalarından değer almak için üç işlev ekledik:

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

Bunlar, v3'teki bir renk değişkenini nasıl kullandığınıza benzer şekilde, bir Sass haritasından bir renk seçmenize izin verir.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Haritadan belirli bir renk düzeyi elde etmek için başka bir işlevimiz de var . $theme-colorsNegatif seviye değerleri rengi açarken, daha yüksek seviyeler koyulaştıracaktır.

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

Pratikte, işlevi çağırır ve iki parametre iletirsiniz: gelen rengin adı $theme-colors(örneğin, birincil veya tehlike) ve sayısal bir düzey.

.custom-element {
  color: theme-color-level(primary, -10);
}

Gelecekte ek işlevler eklenebilir veya ek Sass haritaları için seviye işlevleri oluşturmak üzere kendi özel Sass'ınız veya daha ayrıntılı olmak istiyorsanız genel bir işlev eklenebilir.

Renk kontrastı

Bootstrap'a eklediğimiz ek bir işlev, renk kontrastı işlevidir, color-yiq. Belirtilen temel renge göre açık ( ) veya koyu ( ) kontrast rengini otomatik olarak döndürmek için YIQ renk alanı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.#fff#111

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

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

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

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

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

.custom-element {
  color: color-yiq(theme-color("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 . IE'de arka plan görüntülerini düzgün bir şekilde oluşturmak için bu karakterlerden kaçılması gerekir. İş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);
}

Sas seçenekleri

Bootstrap 4'ü yerleşik özel değişkenler dosyamızla özelleştirin ve global CSS tercihlerini yeni $enable-*Sass değişkenleriyle kolayca değiştirin. Bir değişkenin değerini geçersiz kılın ve npm run testgerektiğinde yeniden derleyin.

scss/_variables.scssBootstrap dosyasında temel global seçenekler için bu değişkenleri bulabilir ve özelleştirebilirsiniz .

Renk

Bootstrap'in çeşitli bileşenleri ve yardımcı programlarının çoğu, bir Sass haritasında tanımlanan bir dizi renk aracılığıyla oluşturulur. Bu harita, bir dizi kural kümesini hızla oluşturmak için Sass'ta döngüye alınabilir.

Tüm renkler

Bootstrap 4'te bulunan tüm renkler, scss/_variables.scssdosyada Sass değişkenleri ve bir Sass haritası olarak mevcuttur. Bu, zaten eklediğimiz gri tonlamalı palete çok benzeyen ek gölgeler eklemek için sonraki küçük sürümlerde genişletilecektir .

Bunları Sass'ınızda şu şekilde kullanabilirsiniz:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Ayar için renk yardımcı sınıfları da mevcuttur colorve background-color.

Tema renkleri

Renk şemaları oluşturmak için daha küçük bir renk paleti oluşturmak için tüm renklerin bir alt kümesini kullanırız, ayrıca Bootstrap scss/_variables.scssdosyasında Sass değişkenleri ve bir Sass haritası olarak da bulunur.

griler

scss/_variables.scssProjenizde tutarlı gri tonları için geniş bir gri değişken seti ve bir Sass haritası . Bunların, nötr griler yerine ince bir mavi tona meyilli olan "soğuk griler" olduğuna dikkat edin.

içinde scss/_variables.scss, Bootstrap'in renk değişkenlerini ve Sass haritasını bulacaksınız. İşte $colorsSass haritasına bir örnek:

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

Diğer birçok bileşende nasıl kullanıldıklarını güncellemek için harita içindeki değerleri ekleyin, kaldırın veya değiştirin. Ne yazık ki şu anda her bileşen bu Sass haritasını kullanmıyor. Gelecekteki güncellemeler bunu geliştirmek için çaba gösterecektir. O zamana kadar ${color}değişkenleri ve bu Sass haritasını kullanmayı planlayın.

Bileşenler

Bootstrap bileşenlerinin ve yardımcı programlarının çoğu, @eachbir Sass haritası üzerinde yinelenen döngülerle oluşturulmuştur. Bu, özellikle bizim tarafımızdan bir bileşenin $theme-colorsvaryantlarını oluşturmak ve her kesme noktası için duyarlı varyantlar oluşturmak için yararlıdır. Bu Sass haritalarını özelleştirirken ve yeniden derledikçe, değişikliklerinizin bu döngülere yansıdığını otomatik olarak göreceksiniz.

değiştiriciler

Bootstrap bileşenlerinin çoğu, temel değiştirici sınıf yaklaşımıyla oluşturulmuştur. Bu, .btnstil varyasyonlarının değiştirici sınıflarla (ör .btn-danger. Bu değiştirici sınıflar, değiştirici sınıflarımızın $theme-colorssayısını ve adını özelleştirmek için haritadan oluşturulmuştur.

Bileşen ve tüm arka plan yardımcı programlarımız $theme-colorsiçin değiştiriciler oluşturmak için harita üzerinde nasıl döngü yaptığımıza dair iki örnek ..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);
}

Duyarlı

Bu Sass döngüleri de renkli haritalarla sınırlı değildir. Ayrıca bileşenlerinizin veya yardımcı programlarınızın duyarlı varyasyonlarını da oluşturabilirsiniz. Örneğin , bir medya sorgusu içeren Sass haritası @eachiçin bir döngüyü karıştırdığımız duyarlı metin hizalama yardımcı programlarımızı ele alalım.$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; }
  }
}

' nizi değiştirmeniz gerekirse $grid-breakpoints, değişiklikleriniz o harita üzerinde yinelenen tüm döngülere uygulanacaktır.

CSS değişkenleri

Bootstrap 4, derlenmiş CSS'sinde yaklaşık iki düzine CSS özel özelliği (değişken) içerir. Bunlar, tarayıcınızın Denetçisinde, bir kod sanal alanında veya genel prototiplemede çalışırken tema renklerimiz, kesme noktalarımız ve birincil yazı tipi yığınlarımız gibi yaygın olarak kullanılan değerlere kolay erişim sağlar.

Kullanılabilir değişkenler

İşte dahil ettiğimiz değişkenler ( :rootgerekli olduğunu unutmayın). Dosyamızda bulunurlar _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;
}

Örnekler

CSS değişkenleri, Sass'ın değişkenlerine benzer bir esneklik sunar, ancak tarayıcıya sunulmadan önce derlemeye gerek yoktur. Örneğin, burada sayfamızın yazı tipini ve bağlantı stillerini CSS değişkenleriyle sıfırlıyoruz.

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

kesme noktası değişkenleri

Kesme noktalarını ilk olarak CSS değişkenlerimize dahil etsek de (örneğin, --breakpoint-md), bunlar medya sorgularında desteklenmezler , ancak yine de medya sorgularında kural kümelerinde kullanılabilirler. Bu kesme noktası değişkenleri, JavaScript tarafından kullanılabilmeleri koşuluyla geriye dönük uyumluluk için derlenmiş CSS'de kalır. Spesifikasyonda daha fazla bilgi edinin .

İşte desteklenmeyenlere bir örnek:

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

Ve işte neyin desteklendiğine bir örnek:

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