Eğer yapacağınız projenizde SCSS kullanmayı düşünüyorsanız kesinlikle kodları küçük parçalara ayırmaya çalışın.
Örneğin bir web sayfası yapıyorsunuz diyelim. Tüm Scss kodlarını tek dosyada yazarsanız bir süre sonra yönetilebilirliği kaybetmeye başlarsınız. Kodlar uzadıkça neyi nerede yazdığınızı bulmanız da zor olacaktır.
Web sayfasının header, content ve footer kısımlarının Scss kodlarını ayrı ayrı dosyalarda yazdığınızı düşünün.
Böylece footer kısmında bir yeri düzenlemeniz gerektiğinde direk bakacağınız dosyayı bilmiş olursunuz. Aynı şekilde header kısmında bir yeri düzenlemeniz gerektiğinde yine direk bakacağınız dosya bellidir.
Son olarak ayrı ayrı oluşturduğumuz bu dosyaların tamamını tek dosyadan çağırıp tüm kodları birleştirebiliriz.
İşte bu kodları birleştirmek için SCSS’de import özelliğini kullanıyoruz.
İmport kullanımının tam olarak anlaşılması için çok basit bir web sayfası şablonu oluşturacağız.
Oluşturacağımız web sayfasının son hali aşağıdaki gibidir.
Gördüğünüz gibi sayfamızda Header, Footer ve içeriklerin bulunacağı Section alanları bulunuyor.
Bu alanların hepsi için ayrı ayrı scss dosyası oluşturup kodlarımızı ona göre yazacağız.
⇒ Html kodlarım için index.html dosyası oluşturdum.
⇒ Kullanacağım değişkenler için variables.scss dosyası oluşturdum.
⇒ Header alanı için header.scss dosyası oluşturdum.
⇒ İçerikler için section.scss dosyası oluşturdum.
⇒ Footer alanı için footer.scss dosyası oluşturdum.
⇒ Tüm kodları birleştirmek için ise main.scss dosyası oluşturdum.
⇒ main.scss dosyasının çıktısı olan main.css dosyasını ise index.html sayfasına ekledim.
İmport edeceğimiz bu scss dosyalarına partial dosyalar da deniliyor. Genel olarak partial dosyaları, önüne alt çizgi “_” ekleyerek yazarız.
Örneğin;
footer.scss yerine _footer.scss şeklinde yazıyoruz. Tabi bu zorunluluk değil. Yani hangi şekilde yazmak isterseniz öyle kullanabilirsiniz.
Artık kodlarımızı yazmaya başlayabiliriz.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./dist/css/main.css"> </head> <body> <header> HEADER </header> <section> <article> Article-1 </article> <article> Article-2 </article> <article> Article-3 </article> </section> <footer> Copyright@2019. </footer> </body> </html> |
variables.scss Kodları
|
1 2 3 4 5 |
$primary-color:#204E5F; $secondary-color:#B7D7D8; $text-color:#FFFFFF; |
Tasarımda kullanacağım renkleri birer değişkene atıyorum.
Bu değişkenleri her yerde kullanacağım için variables.scss dosyasını diğer tüm sayfalarda import edeceğim.
İmport işlemini şu şekilde yapıyoruz:
⇒ @import yazdıktan sonra tek tırnak (‘) içerisinde import etmek istediğimiz dosyanın ismini yazıyoruz ve noktalı virgül (;) koyarak bitiriyoruz.
header.scss Kodları
|
1 2 3 4 5 6 7 8 9 10 |
@import 'variables'; header{ text-align: center; background-color: $primary-color; color: $text-color; padding: 30px; } |
section.scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@import 'variables'; section{ overflow: auto; article{ background-color: $secondary-color; float: left; width: 33.1%; height: 400px; line-height: 400px; text-align: center; font-size: 24px; border: 1px solid; } } |
footer.scss Kodları
|
1 2 3 4 5 6 7 8 9 10 |
@import 'variables'; footer{ background-color: $primary-color; text-align: center; color: $text-color !important; padding: 20px; } |
main.scss Kodları
Ayrı dosyalarda yazmış olduğumuz tüm kodları main.scss dosyasında import ederek birleştiriyoruz.
|
1 2 3 4 5 |
@import 'header'; @import 'section'; @import 'footer'; |
import edip edemediğimizden emin olmak için main.scss dosyasının css çıktısına bakmamız yeterli.
Css Çıktısı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
header { text-align: center; background-color: #204E5F; color: #FFFFFF; padding: 30px; } section { overflow: auto; } section article { background-color: #B7D7D8; float: left; width: 33.1%; height: 400px; line-height: 400px; text-align: center; font-size: 24px; border: 1px solid; } footer { background-color: #204E5F; text-align: center; color: #FFFFFF !important; padding: 20px; } |
Gördüğünüz gibi main.css dosyasında tüm kodlarımız doğru bir şekilde geldi.
Burada çok basit bir sayfa üzerinde import işlemini gerçekleştirdik.
Eğer binlerce satır css kodu yazacağınız bir projeyi bu şekilde parçalara ayırıp kodlarsanız size sağlayacağı kolaylıkları çok daha iyi anlayacaksınızdır.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
