e
sv

Bootstrap Sass Nedir ve Nasıl Kullanılır ?

Bootstrap Sass Nedir ve Nasıl Kullanılır ?
avatar

Yazılım Method

  • e 0

    Mutlu

  • e 1

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Bootstrap dünya çağında kullanılan mobil uyumlu kullanımı basit bir css ve javascript kütüphanesidir. Bootstrapı komponentlerini kullanarak etkileyeci siteler yapabilirsiniz. Responsive yapılar yapmak içinde grid sistemini kullanabilirsiniz.

Bootstrapın kendi içerisinde çeşitli komponentleri ve layoutsları bulunmaktadır. Bu komponentler :

  • Tables
  • Forms
  • Accordion
  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Close button
  • Collapse
  • Dropdowns
  • List group
  • Modal
  • Navs & tabs
  • Navbar
  • Offcanvas
  • Pagination
  • Placeholders
  • Popovers
  • Progress
  • Scrollspy
  • Spinners
  • Toasts
  • Tooltips

liste şeklindeki komponentlerin bootstrap kendi içerisinde varsayılan değer tanımlamaktadır. Bunlarla beraber renk kodları v.s dahası bulunmaktadır. Varsayılan ayarları ise scss ile ezebilir veya kendimiz yeni komponent ( yeni buton ) yapabiliriz yeterki ne istediğinizi bilin 🙂

SASS ( Syntactically Awesome Style Sheets )

SASS, Syntactically Awesome Style Sheets(Sözdizimsel Müthiş Stil Sayfaları) en popüler css ön işlemcilerdendirir. CSS ‘e göre bir dinamik dil tarzındadır. CSS atrı olarak değişken oluşturma , fonksiyon i iç içe yapılar yapmamıza olanak sağlamaktadır.

SASS kullanımı oldukça basittir. Dosya uzantısı .scss ‘tir ama tarayıcılar scss dosyalarını okumayaz bundan dolayı compiler (dönüştürme) araçları kullanarak .css‘e dönüştürürüz. Bu sayede arama motorları css kodlarını okuyarak biçimlendir işlemleri yaparlar.

SASS Compiler Nasıl İndirilir ?

Sass kodlarının derlenmesi için bir compiler aracına ihtiyacımız vardır. Eğer bilgisayarınızda nodejs yüklü ise node-sass kurarak bu işlemi yapabiliriz.

Çalışma ortamımızı hazırlarken bir klasör oluşturalım ve node init --y ile bir package.json dosyası oluşturulsun. node-sass ‘ı yükleyebilmek için terminale aşağıdaki kodu yazın

npm install node-sass

yükleme işlemi bitiğinden sonra package.json dosyanızda scripts bölümüne aşağıdaki kodu ekleyiniz.

"scss": "node-sass --watch scss -o css --output-style compressed"

bu işlemlerde bittikten sonra klasör dizininde bu dosyaları oluşturun

#   Oluşturacağınız Dosyalar


└───scss
    └───_bootstrap-overrides.scss
    └───_responsive.scss
    └───_style.scss
    └───_main.scss

#   _main.scss dosyasına aşağıdaki kodları yazmanız yeterlidir.

@import 'bootstrap-overrides';
@import '../node_modules/bootstrap/scss/bootstrap.scss';  
@import 'style';
@import 'responsive';

Her şey hazır tek yapmanız gereken terminale npm run scss bunu yaptıktan sonra yaptığınız her değişiklik çıktı olarak css/main.css dosyasını verecektir.

Bootstrap Sass Compiler Ekleme

Aslında herşey bootstrapı projemize dahi etmekle kalmıştır 😉 Bootstrapı projemize terminale aşağıdaki kodu yazarak ekliyebilirsiniz. Ekledikten sonra .scss dosyasınada eklememiz gerek gerekli kodları aşağıda bıraktım.

# Bootstrapı Projeye Dahil Edin 
npm install bootstrap

# Bootstrapı SASS (scss) Dahil Edin 
@import '../node_modules/bootstrap/scss/bootstrap.scss';

Gerçek projemizde denemek için bir index.html dosyası oluşturun ve aşağıdaki kodları ekleyin. Ekledikten sonra tarayıcınızı açın ve sayfa kaynağında css/main.css dosyasını kontrol edin eğer bootstrap css kodlarını görebiliyorsanız ekleme işlemi tamamlanmıştır 🙂

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>www.YAZİLİMMETHOD.com</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <h1>Bootstrap SASS STARTER</h1>
</body>
</html>

SASS ile Bootsrap Kullanımı

Bootstrapın scss dosyasını import ettikten sonra o dosya içerisinde bazı ayarları değiştirebiliyoruz . Örneğin :

  • Yükseklik
  • Genişlik
  • Renkler
  • Özel değerler

ve birçoğuna erişim sağlamaktayız. Örnek verecek olursak Badges ‘te font,padding,border-radius değerleri vardır. aşağıda bootstrapın dökümanında Sass Variables kodları bulunmaktadır.

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;

bu kodları ezebilmek için hatırlarsanız _bootstrap-overrides.scss sayfası oluşturduk şimdi işlemlerimize bu sayfadan devam ediyoruz 🙂

Bootstrap SASS Kodları Nasıl Ezilir ?

İlk sırada bootstrap.sass dosyasını import etmemiz gerekiyor ardından _bootstrap-overrides.scss dosyası gelecek şekilde ayarlıyoruz. Burada ise size yukarda vermiş olduğum badges kodlarını terkarar kendi isteğinize göre düzenleyiniz. Düzenleme işlemi yaptığınızda npm run scss kodunu terminalde çalıştırdığınızdan emin olun mesela aşağıdaki kodları yazabilirsiniz

$primary:tomato;
$badge-font-size:2em;
$badge-padding-y:3em;
$badge-padding-x:6em;
$badge-border-radius:15%;

tabiki bunları yaparken bootstrapın hiyerarşisine uygun olarak yapınız. Bu işlemleri yaptıktan sonra istediğiniz bootstrap komponentini kendinize özgün biçimlendirmeye tabi tutabilirsiniz 🙂

Bu işlemleri yaparken sizler için github’a starter hazırladım aynı zamanda onada aşağıdaki linkten ulaşabilirsiniz 🙂

Sıradaki içerik:

Bootstrap Sass Nedir ve Nasıl Kullanılır ?