Bootstrap, popüler bir CSS framework'ü, Sass (Syntactically Awesome Style Sheets) ile birlikte kullanıldığında özelleştirme olanaklarını artırır. Sass, CSS'in bir üst kümesi olarak, değişkenler, karışımlar ve fonksiyonlar gibi programlama özelliklerini destekler. Bootstrap'ta Sass kullanarak, çeşitli bileşenlerin ve stillerin özelleştirilmesine olanak tanıyan birçok değişken bulunmaktadır. İşte Bootstrap Sass değişkenlerini anlamanıza yardımcı olacak bazı temel noktalar:
1. Değişken Tanımı
Bootstrap Sass değişkenleri, genellikle variables.scss dosyasında tanımlanır. Değişkenler $ işareti ile başlar ve belirli bir stil veya renk gibi değerleri saklar. Örneğin:
$primary: #007bff;
$secondary: #6c757d;
2. Renk Değişkenleri
Renk değişkenleri, tasarımınızda kullanılacak ana renkleri belirlemek için kullanılır. Örneğin:
$primary: #007bff; // Ana mavi renk
$success: #28a745; // Başarılı durum rengi
$danger: #dc3545; // Hata durumu rengi
3. Büyüklük Değişkenleri
Bootstrap, çeşitli bileşenlerin boyutlarını kontrol etmek için de değişkenler sunar. Örneğin:
$font-size-base: 1rem; // Temel yazı boyutu
$line-height-base: 1.5; // Temel satır yüksekliği
4. Spacing Değişkenleri
Margin ve padding gibi boşluk değerlerini ayarlamak için kullanılır:
$spacer: 1rem; // Boşluk birimi
$spacer-x: 1rem; // Yatay boşluk
$spacer-y: 0.5rem; // Dikey boşluk
5. Özelleştirme
Bootstrap’ı özelleştirmek için, kendi değişkenlerinizi tanımlayarak varsayılan değerleri geçersiz kılabilirsiniz. Örneğin, $primary değişkeninin değerini değiştirmek:
$primary: #ff5733; // Yeni bir ana renk belirleme
6. Karmaşık Yapılar
Sass, değişkenleri bir araya getirerek karmaşık yapılar oluşturmanıza da olanak tanır. Örneğin:
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"danger": $danger,
);
7. Kullanım
Değişkenleri, stil dosyalarınızda normal CSS gibi kullanabilirsiniz. Örneğin:
.btn-primary {
background-color: $primary;
border-color: $primary;
}
8. Bootstrap'ın Değişkenlerini Bulma
Bootstrap değişkenlerini kullanmak için, Bootstrap kaynak kodunu inceleyebilir veya Bootstrap Docs sayfasından erişebilirsiniz. Orada, tüm varsayılan değişkenlerin ve bunların nasıl kullanılacağının detaylarını bulabilirsiniz.
Sonuç
Bootstrap ve Sass birlikte kullanıldığında, web projelerinizi çok daha esnek ve özelleştirilebilir hale getirir. Değişkenleri kullanarak, tasarımınızı hızlıca değiştirip, geliştirebilirsiniz.