Bootstrap'i Sass ile Özelleştirme: Dosya Yapısı, Import Sırası, Map'ler ve Fonksiyonlar

Özelleştirmenin iki yolu

Belgeler Bootstrap'i özelleştirmek için iki yolu öne çıkarır. Birincisi Bootstrap'i npm gibi bir paket yöneticisiyle projeye eklemek ve kaynak Sass dosyalarını kendi derleme sürecinizde kullanmaktır; bu yazının konusu budur. İkincisi derlenmiş dağıtım dosyalarını ya da jsDelivr bağlantısını kullanıp kendi CSS dosyanızla Bootstrap'in kurallarına ekleme yapmak veya onları ezmektir. İkinci yol derleme gerektirmez ama zahmetlidir: bir rengi değiştirmek istediğinizde o rengi kullanan buton, uyarı, liste grubu, tablo ve yardımcı sınıf kurallarının her birini ayrı ayrı ezmeniz gerekir. Sass yolunda ise tek bir değişkeni değiştirip yeniden derlersiniz ve o değişkene bağlı her kural yeniden üretilir.

CDN ile kurulum için CDN kurulumu ve başlangıç şablonu, npm ve paketleyici ayarları için npm, webpack ve Parcel kurulumu yazısına bakın. Bu yazıdaki Sass parçaları resmî belgedeki yapıya göre yazıldı ve burada derlenmedi; kullanılan değişken, map, fonksiyon ve mixin adlarının hepsi v5.0.2 kaynak dosyalarında arandı ve bulundu. Geçiş belgesi Bootstrap 5'in derleyici olarak kullanımdan kalkan Libsass yerine Dart Sass'a geçtiğini belirtir; derleme aracınızı seçerken bunu göz önünde bulundurun.

Dosya yapısı: çekirdek dosyalara dokunmayın

Belgenin ilk tavsiyesi Bootstrap'in kendi dosyalarını değiştirmemektir. Nedeni basittir: node_modules/bootstrap klasöründeki bir dosyayı düzenlerseniz, paketi güncellediğinizde ya da projeyi başka bir makinede yeniden kurduğunuzda değişiklikleriniz kaybolur. Bunun yerine kendi scss klasörünüzde bir custom.scss dosyası açar, Bootstrap'i oradan içe aktarır ve tüm ayarlarınızı bu dosyada tutarsınız. npm kullanan bir projede düzen şöyledir:

your-project/
  scss/
    custom.scss
  node_modules/
    bootstrap/
      js/
      scss/

Paket yöneticisi kullanmadan kaynak dosyaları indirdiyseniz aynı ayrımı elle kurun: bootstrap/ klasörünü kendi dosyalarınızdan ayrı tutun ve yalnızca kendi dosyanızı düzenleyin. Bu yazıdaki import yolları npm düzenine göre ../node_modules/bootstrap/scss/ ile başlar; kendi klasör yapınıza göre bu yolu uyarlayın.

İçe aktarma: hepsi mi, yalnızca gerekenler mi?

Belge iki seçenek sunar. A seçeneğinde tek satırla Bootstrap'in tamamını alırsınız. Değişken değerlerinizi bu satırdan önce yazabilirsiniz; ancak o noktada Bootstrap'in fonksiyonları henüz yüklenmediği için kendi değerlerinizde tint-color() gibi fonksiyonları kullanamazsınız.

// custom.scss - A seçeneği: Bootstrap'in tamamı

// Değişken değerlerinizi buraya yazın (fonksiyonlar henüz yok)

@import "../node_modules/bootstrap/scss/bootstrap";

// Kendi ek kodunuz buradan sonra

B seçeneğinde dosyaları tek tek alırsınız. Belge bu yolu önerir: kullanmadığınız bileşenler derlenen CSS'e hiç girmez ve fonksiyonları değişken değerlerinizde kullanabilirsiniz. Sıra şöyledir: önce fonksiyonlar, sonra sizin değişken değerleriniz, sonra zorunlu variables ve mixins, en sonda isteğe bağlı bileşenler ve kendi kodunuz. Belge, bileşenler arasında bazı bağımlılıklar olduğunu ve eklentiler için JavaScript dosyalarını ayrıca yüklemeniz gerektiğini de hatırlatır.

// custom.scss - B seçeneği: gereken parçalar

// 1. Önce fonksiyonlar (renk, SVG, calc işlemleri için)
@import "../node_modules/bootstrap/scss/functions";

// 2. Varsayılan değişken değerlerini ezdiğiniz satırlar

// 3. Zorunlu dosyaların geri kalanı
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. İsteğe bağlı bileşenler
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. Kendi ek kodunuz

Belge, isteğe bağlı bölümü kurarken bootstrap.scss dosyasındaki tam listeyi başlangıç noktası olarak almanızı önerir. v5.0.2'de bu liste dört bölümdür: yapılandırma (functions, variables, mixins, utilities), root ile başlayıp offcanvas ile biten 30 dosyalık yerleşim ve bileşen bölümü, helpers ve en sonda yardımcı sınıfları üreten utilities/api. Kısaltılmış hâli şöyledir:

// bootstrap.scss (v5.0.2, kısaltıldı)
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
// ... containers, grid, tables, forms, buttons, transitions, dropdown ...
@import "modal";
@import "carousel";
@import "spinners";
@import "offcanvas";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

!default: değişken değerini ezmenin kuralı

scss/_variables.scss dosyasındaki her değişken !default bayrağı taşır. Sass'ta bu bayrak, değişkene yalnızca daha önce bir değer atanmamışsa değer verir. Sizin dosyanızda $body-bg: #000; satırı Bootstrap'in değişkenlerinden önce gelirse Bootstrap kendi varsayılanını atamaz ve sizin değeriniz kalır. Belgenin önerdiği yöntem de budur: değiştirmek istediğiniz değişkeni _variables.scss dosyasından kopyalayın, değerini değiştirin ve !default bayrağını silin.

Buradan çıkan sıra kuralı belgede açıkça yazar: değişken ezmeleri fonksiyonlardan sonra, diğer import'lardan önce gelmelidir. Fonksiyonlardan sonra gelmesi, değerinizde tint-color() ya da shade-color() kullanabilmeniz içindir; diğerlerinden önce gelmesi ise başka değişkenlerin sizin değerinizden türetilmesi içindir. Belgedeki örnek <body> öğesinin arka plan ve yazı rengini değiştirir:

// Zorunlu
@import "../node_modules/bootstrap/scss/functions";

// Varsayılan değişken değerlerini ezme
$body-bg: #000;
$body-color: #111;

// Zorunlu
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// İsteğe bağlı bileşenler
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// vb.

Sıranın neden önemli olduğunu bir zincirle görelim. v5.0.2 kaynağında $link-color varsayılan olarak $primary değerini alır, $link-hover-color da shift-color($link-color, $link-shade-percentage) ile ondan hesaplanır. $primary değerini variables import'undan önce verirseniz bağlantı rengi ve üzerine gelme rengi de yeni renginizden türetilir. Aynı satırı variables import'undan sonra yazarsanız $primary değişkeni değişir ama ondan türeyen değişkenler ve $theme-colors map'i eski değerle çoktan oluşturulmuştur; derlenen CSS'te bazı kurallar yeni rengi, bazıları eskisini kullanır. Bu karışık sonuç, Sass özelleştirmesinde en sık karşılaşılan şikâyettir.

Bazı değişkenlerin varsayılan değeri null olarak tanımlıdır. Belgeye göre bu değişkenler siz bir değer verene kadar ilgili CSS özelliğini hiç yazdırmaz. Örneğin v5.0.2'de $body-text-align ve $nav-link-font-size böyledir. Bu, Bootstrap'in bir özelliği varsayılan olarak hiç ayarlamadan size bir ayar noktası bırakma yoludur: değer verirseniz kural çıktıya eklenir, vermezseniz tarayıcının ya da Reboot'un davranışı geçerli kalır.

Map'ler: değiştirme, ekleme, çıkarma

Bootstrap renkler, kırılma noktaları ve benzeri aileler için anahtar-değer çiftlerinden oluşan Sass map'leri kullanır. Bileşenlerin çoğu bu map'ler üzerinde @each döngüsüyle dolaşarak sınıf üretir; bir map'e anahtar eklemek o anahtar için yeni bir sınıf ailesi demektir. Map'ler de !default taşır. Belge önemli bir ayrıntıya dikkat çeker: bazı map'ler varsayılan olarak boş bir map ile birleştirilerek kurulur; bu genişletmeyi kolaylaştırır ama bir anahtarı çıkarmayı zorlaştırır. Geçiş notlarına göre v5'te varsayılan map birleştirmeleri kaldırıldı; $theme-colors gibi bir map'i baştan tanımlarsanız içindeki bütün anahtarları sizin yazmanız gerekir.

Mevcut bir değeri değiştirmek

$theme-colors map'indeki her renk ayrıca tek başına bir değişken olarak tanımlıdır. Mevcut bir rengi değiştirmek için map'e dokunmanız gerekmez; değişkeni ezmeniz yeterlidir. Bootstrap map'i daha sonra bu değişkenlerden kurar.

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

Map'e yeni anahtar eklemek

Yeni bir anahtar eklemek için kendi map'inizi oluşturup map-merge ile mevcut map'e birleştirirsiniz. Bu satır $theme-colors tanımlandıktan sonra, yani variables import'undan sonra ve bileşen dosyalarından önce çalışmalıdır; daha önce yazarsanız birleştirilecek map henüz yoktur, daha sonra yazarsanız bileşen döngüleri yeni anahtarı görmez. text- ve bg- yardımcı sınıflarının da yeni rengi alması için satırı utilities import'undan önce yazın, çünkü o dosya renk değerlerini içe aktarıldığı anda okur.

// Kendi map'iniz
$custom-colors: (
  "custom-color": #900
);

// Birleştirme
$theme-colors: map-merge($theme-colors, $custom-colors);

Map'ten anahtar çıkarmak

Bir anahtarı çıkarmak için map-remove kullanılır. Belge bu satırın zorunlu dosyalarla isteğe bağlı dosyalar arasına yazılması gerektiğini özellikle belirtir:

// Zorunlu
@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");

// İsteğe bağlı
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// vb.

Zorunlu anahtarlar

Bootstrap bazı map anahtarlarının var olduğunu varsayar. Belgeye göre $theme-colors içindeki primary, success ve danger anahtarları bağlantılar, butonlar ve form durumları için kullanılır. Bu anahtarların değerini değiştirmek sorun çıkarmaz; anahtarı tamamen silmek ise derleme hatasına yol açabilir ve o durumda bu değerleri kullanan Sass kodunu da sizin değiştirmeniz gerekir. Tema renkleriyle ilgili ayrıntılar tema renkleri yazısında.

Bootstrap'in Sass fonksiyonları

tint-color, shade-color ve shift-color

Belge, rengi açmak ya da koyulaştırmak için Sass'ın lighten() ve darken() fonksiyonları yerine Bootstrap'in tint-color() ve shade-color() fonksiyonlarını önerir. Fark şudur: Sass'ın fonksiyonları rengin açıklık değerini sabit bir miktar kaydırır, Bootstrap'inkiler ise rengi beyaz ya da siyahla karıştırır. Kaynak kodda üçüncü bir fonksiyon daha vardır: shift-color() ağırlık pozitifse koyulaştırır, negatifse açar.

// scss/_functions.scss (v5.0.2)
// 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));
}

Kullanırken rengi ve yüzde olarak ağırlığı verirsiniz. Bootstrap'in kendisi de bu fonksiyonlara dayanır: örneğin uyarı bileşeni arka plan rengini shift-color($value, $alert-bg-scale) ile hesaplar ve $alert-bg-scale varsayılan olarak -80% olduğu için tema rengi beyazla açılır.

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

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

color-contrast: okunur yazı rengi seçmek

color-contrast() verilen arka plan rengine göre okunur bir yazı rengi döndürür. Belge, WCAG 2.0'ın yazı için en az 4.5:1 kontrast oranı istediğini ve fonksiyonun WCAG algoritmasıyla göreli parlaklığı hesapladığını anlatır. v5.0.2 kaynağında fonksiyon sırasıyla $color-contrast-light, $color-contrast-dark, $white ve $black renklerini dener ve oranı $min-contrast-ratio değerini (varsayılan 4.5) geçen ilk rengi döndürür. Hiçbiri geçemezse en yüksek oranı vereni döndürür ve derleme sırasında bir uyarı yazar. Döngülerde özellikle işe yarar:

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

.custom-element {
  color: color-contrast($dark);
}

escape-svg, add ve subtract

escape-svg(), SVG arka plan görsellerinde sorun çıkaran karakterleri kodlar. Belge <, > ve # karakterlerini sayar; v5.0.2 kaynağındaki $escaped-characters listesi parantezleri de içerir. Bu fonksiyonu kullanırken data URI değerini tırnak içine almanız gerekir. add() ve subtract() ise CSS calc() fonksiyonunu sarar. Amaçları, birimsiz 0 değeri bir calc ifadesine girdiğinde oluşan geçersiz çıktıyı önlemektir: belgeye göre calc(10px - 0) gibi bir ifade matematiksel olarak doğru olsa da tarayıcılarda geçersizdir.

$border-radius: .25rem;
$border-width: 0;

.element {
  // calc(.25rem - 0) üretir: geçersiz
  border-radius: calc($border-radius - $border-width);
}

.element {
  // .25rem üretir
  border-radius: subtract($border-radius, $border-width);
}

Yorum satırlarındaki çıktılar resmî belgeden alınmıştır; kaynak koddaki subtract() da iki değer karşılaştırılabilir sayılarsa doğrudan çıkarma yapar, aksi hâlde calc() üretir.

Mixin'ler

scss/mixins/ klasörü v5.0.2'de 24 dosya içerir ve Bootstrap'in kendi bileşenleri bu mixin'lerle yazılmıştır; aynılarını kendi kodunuzda da kullanabilirsiniz. Kırılma noktası mixin'leri (media-breakpoint-up ve diğerleri) breakpoint yazısında, ızgara mixin'leri (make-row, make-col) grid yazısında, buton varyantı mixin'i tema renkleri yazısında anlatılıyor. Belgenin Sass sayfasında ayrıca anlatılan mixin color-scheme'dır; prefers-color-scheme medya sorgusunun kısaltmasıdır:

// scss/mixins/_color-scheme.scss (v5.0.2)
@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

// Kullanım
.custom-element {
  @include color-scheme(dark) {
    // Karanlık mod stilleri
  }
}

Bu mixin yalnızca medya sorgusunu yazar; içine koyacağınız karanlık mod stillerini sizin hazırlamanız gerekir. Medya sorgusu kavramının kendisi için CSS media query yazısına bakabilirsiniz.

Uygulamalı örnek: küçük bir custom.scss

Şimdi bölümleri birleştirelim. Aşağıdaki dosya marka rengini ve köşe yarıçapını değiştirir, gölgeleri açar, yalnızca sayfada kullanılan bileşenleri alır ve Bootstrap'in değişken ve mixin'leriyle küçük bir .kutu bileşeni tanımlar. Kapatılabilir uyarı kullanılacağı için close ve solma efekti için transitions dosyaları da eklendi; belgenin uyardığı bileşenler arası bağımlılıklara bir örnek budur.

// scss/custom.scss
@import "../node_modules/bootstrap/scss/functions";

// Değişken ezmeleri
$primary: #0b7285;
$border-radius: .5rem;
$enable-shadows: true;

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

// Kullanılan parçalar
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

// Kendi bileşeniniz
.kutu {
  padding: $spacer;
  border: $border-width solid tint-color($primary, 70%);
  @include border-radius($border-radius);
  @include box-shadow($box-shadow-sm);

  @include media-breakpoint-up(md) {
    padding: $spacer * 2;
  }
}

Dosyada üç ayrıntıya dikkat edin. Birincisi, $enable-shadows açıldığı için box-shadow mixin'i gölgeyi yazar; kapalı olsaydı kaynak koddaki @if $enable-shadows koşulu yüzünden hiçbir şey yazmazdı. İkincisi, border-radius mixin'i de $enable-rounded açıkken yarıçap yazar. Üçüncüsü, .kutu kuralı tüm import'lardan sonra geldiği için bütün değişkenler, fonksiyonlar ve mixin'ler hazırdır. Derlenen dosyayı HTML'de şöyle kullanırsınız:

<div class="container py-4">
  <div class="kutu mb-3">
    <h2 class="h4">Sipariş özeti</h2>
    <p class="mb-0">Ödemeniz alındı.</p>
  </div>
  <div class="alert alert-primary alert-dismissible fade show" role="alert">
    Siparişiniz hazırlanıyor.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Kapat"></button>
  </div>
  <button type="button" class="btn btn-primary">Devam et</button>
</div>

Bu HTML parçası bir ayrıştırıcıyla denetlendi; kutu dışındaki bütün sınıflar v5.0.2 derlenmiş CSS dosyasında tanımlıdır. Uyarının kapanması için Bootstrap'in JavaScript dosyası da sayfada olmalıdır; JavaScript tarafı için JavaScript API yazısına bakın.

Derlenen dosyayı küçültmek

Belgenin optimizasyon sayfası Sass tarafında en büyük kazancın bootstrap.scss içindeki yerleşim ve bileşen bölümünden geleceğini söyler: kullanmadığınız bir bileşenin import satırını yorum satırına çevirin ya da silin. Örneğin carousel kullanmıyorsanız o satırı çıkarmak derlenen CSS'i küçültür. Bazı dosyalar birbirine bağımlı olduğu için her satırı çıkarmak mümkün olmayabilir; çıkardıktan sonra sayfanızı mutlaka kontrol edin.

Kaynak klasöründe hazır alt kümeler de vardır: bootstrap-grid.scss, bootstrap-reboot.scss ve bootstrap-utilities.scss. v5.0.2'deki bootstrap-grid.scss kapsayıcıları ve ızgarayı derler, map-get-multiple() ile yardımcı sınıfları da yalnızca display, sıralama, flex, margin ve padding gruplarıyla sınırlar. Yalnızca yerleşim sistemine ihtiyacınız varsa bu dosyalar iyi bir başlangıçtır.

JavaScript tarafında da aynı mantık geçerlidir. Ana dağıtım dosyaları bütün eklentileri, bundle dosyaları ise ek olarak Popper'ı içerir. Kendi paketleyicinizi kullanıyorsanız yalnızca gereken eklentiyi içe aktarabilirsiniz. bootstrap/js/dist altındaki dosyalar varsayılan dışa aktarım (default export) kullanır:

// Yalnızca modal eklentisini al
import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

Belge, dropdown, tooltip ya da popover içe aktarıyorsanız Popper bağımlılığını package.json dosyanıza eklemenizi hatırlatır. Bunların dışında üç öneri daha yapar: önekleri Autoprefixer'ın .browserslistrc listesine göre üretmek (listeyi daraltıp yeniden derlerseniz bazı önekli kurallar çıkar), dağıtım dosyalarında .min.css ve .min.js sürümlerini kullanmak ve kullanılmayan CSS için PurgeCSS gibi araçlara bakmak. JavaScript temelleri için JavaScript öğrenme rehberine göz atabilirsiniz.

CSP ve CSS içine gömülü SVG görselleri

Bazı Bootstrap bileşenleri tarayıcılar arasında tutarlı görünmek için CSS içinde background-image olarak gömülü SVG kullanır. Belgenin listesi şöyledir: accordion, kapatma butonu (uyarı ve modal içinde), onay kutusu ve radyo düğmeleri, anahtarlar (switch), doğrulama simgeleri, select menüleri, carousel denetimleri ve navbar açma butonu. Katı bir İçerik Güvenliği Politikası (CSP) uyguluyorsanız belge şu seçenekleri anar: adresleri kendi sunucunuzdaki dosyalarla değiştirmek, görselleri kaldırıp satır içi görsel kullanmak (her bileşende mümkün değildir) ya da politikanızı güncellemek. Belgenin tavsiyesi kendi güvenlik politikanızı gözden geçirip karar vermenizdir.

Sık yapılan hatalar

• Değişken ezmelerini variables import'undan sonra yazmak: türetilen değişkenler eski değerle kalır.
• A seçeneğinde (tek satırlık import) değişken değerlerinde tint-color() kullanmaya çalışmak: o noktada fonksiyonlar yüklenmemiştir.
• node_modules/bootstrap/scss içindeki dosyaları doğrudan düzenlemek: güncellemede değişiklikler kaybolur.
• map-merge satırını variables import'undan önce yazmak: birleştirilecek map henüz tanımlı değildir.
• $theme-colors map'inden primary, success ya da danger anahtarını silmek: derleme hatası çıkabilir.
• Parça parça import yaparken utilities/api dosyasını unutmak: yardımcı sınıflar üretilmez.
• Rengi açmak için lighten() kullanıp Bootstrap'in kendi tonlarıyla uyumsuz sonuç almak: tint-color() tercih edin.

Sık Sorulan Sorular

CDN üzerinden yüklenen Bootstrap'i Sass değişkenleriyle değiştirebilir miyim?

Hayır. Sass değişkenleri yalnızca derleme sırasında vardır; CDN'den gelen dosya zaten derlenmiş CSS'tir. Bu durumda kendi CSS kurallarınızla ezme yapabilir ya da derlenmiş CSS'teki --bs- önekli CSS değişkenlerini kullanabilirsiniz. Hangi değerlerin CSS değişkeni olarak geldiği seçenekler ve CSS değişkenleri yazısında anlatılıyor.

Bir değişkenin varsayılan değerini nereden bulurum?

Tüm değişkenler scss/_variables.scss dosyasındadır. Değiştirmek istediğiniz satırı oradan kopyalayıp kendi dosyanıza, variables import'undan önce yapıştırın ve !default bayrağını silin.

Sass yerine yalnızca CSS ile özelleştirme yapmak yanlış mı?

Yanlış değildir; belge derlenmiş dosyalara ekleme yapmayı da tercih edilen yollardan biri olarak sayar. Birkaç kuralı değiştirecekseniz CSS yeterlidir. Renk paleti, boşluk ölçeği ya da kırılma noktaları gibi pek çok kuralı etkileyen bir değişiklik yapacaksanız Sass çok daha az iş çıkarır.

Seçenek A ile B arasında çıktı farkı olur mu?

Tüm dosyaları B seçeneğinde de aynı sırayla alırsanız çıktı aynıdır. Fark, B seçeneğinde kullanmadığınız dosyaları dışarıda bırakabilmeniz ve değişken değerlerinizde Bootstrap fonksiyonlarını kullanabilmenizdir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Tema renkleri · $enable seçenekleri ve CSS değişkenleri · Utilities API · npm ile kurulum · CSS öğrenme rehberi