Bootstrap ile Sass kullanarak bir proje kurmak için aşağıdaki adımları takip edebilirsiniz:
1. Gerekli Araçları Yükleyin
Öncelikle, Sass ve Bootstrap’ı kullanabilmek için bazı araçların sisteminize yüklü olması gerekiyor. Node.js ve npm (Node Package Manager) yüklü değilse, Node.js resmi web sitesinden indirip kurun.
2. Yeni Bir Proje Oluşturun
Terminal veya komut istemcisinde yeni bir proje dizini oluşturun ve içine girin:
mkdir bootstrap-sass-project
cd bootstrap-sass-project
3. Npm ile Projeyi Başlatın
Projeyi başlatmak için npm init komutunu kullanın. Bu, bir package.json dosyası oluşturmanıza yardımcı olur.
npm init -y
4. Bootstrap ve Sass Kurulumu
Bootstrap ve Sass kütüphanelerini kurmak için şu komutları kullanın:
npm install bootstrap sass
5. Proje Yapısını Oluşturun
Aşağıdaki gibi bir dizin yapısı oluşturun:
bootstrap-sass-project/ ├── css/ │ └── styles.css ├── scss/ │ └── styles.scss └── index.html
6. SCSS Dosyasını Düzenleyin
scss/styles.scss dosyasını açın ve Bootstrap'ı dahil edin:
// Bootstrap'ı dahil et
@import "../node_modules/bootstrap/scss/bootstrap";
// Kendi stilinizi buraya ekleyebilirsiniz
7. CSS Dosyasını Oluşturun
css/styles.css dosyasını oluşturun. Bu dosya, Sass dosyasının derlenmiş halini içerecek.
8. Sass'ı Derleyin
Terminalde, Sass dosyasını derlemek için aşağıdaki komutu çalıştırın:
npx sass scss/styles.scss css/styles.css --watch
Bu komut, scss/styles.scss dosyasındaki değişiklikleri izler ve her değişiklikte css/styles.css dosyasını otomatik olarak günceller.
9. HTML Dosyasını Oluşturun
index.html dosyasını oluşturun ve aşağıdaki kodu ekleyin:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>Bootstrap Sass Projesi</title>
</head>
<body>
<div class="container">
<h1>Bootstrap ile Sass Projesi</h1>
<p>Bu, Bootstrap ve Sass kullanarak oluşturulmuş bir örnek projedir.</p>
</div>
</body>
</html>
10. Projeyi Çalıştırın
Projeyi bir tarayıcıda görüntülemek için, basit bir HTTP sunucusu kurabilirsiniz. Örneğin, live-server kullanabilirsiniz:
npm install -g live-server
Daha sonra projenizin kök dizininde şu komutu çalıştırarak projeyi başlatın:
live-server
Bu adımları takip ederek Bootstrap ve Sass ile basit bir proje oluşturmuş olacaksınız. Projenizi geliştirmek için Bootstrap bileşenlerini ve Sass stil özelliklerini kullanabilirsiniz.