Bootstrap Sass Variables

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.