SCSS, yani Sass'ın Sürümü, web geliştiricileri arasında standarda dönüşmüş CSS oluşturma metodudur SCSS ile daha organize ve etkili bir şekilde CSS yazarak, tasarım sürecinizi hızlandırın Öğrenmek isteyenler için buraya tıklayın!

SCSS, cascading style sheets'in (CSS) bir üst kümesidir. Bu, daha yapılandırılmış, okunaklı ve yönetilebilir bir şekilde stil sayfaları oluşturmanızı sağlar. Kullanım amacı, CSS ile aynı olan web sayfalarının görüntülenme biçimlerini ayarlamaktır.

SCSS, CSS için daha gelişmiş bir sözdizimine sahiptir ve bu özellikleri kullanarak kodları daha düzenli bir şekilde yazmanıza, kodlama sürecini hızlandırmanıza ve siteniz için daha az sayıda stil sayfası oluşturmanıza olanak tanır.

SCSS, hem CSS'i destekleyen hem de daha fazla özellik ekleyen bir üst küme olduğundan, SCSS kodları CSS kodları olarak derlenebilir ve CSS dosyaları olarak kullanılabilir.

Syntax

SCSS veya Sassy CSS, CSS'in özelliklerini geliştirmek için bir CSS ön işlemci olarak kullanılır. SCSS ile CSS'in sentaksı arasında bazı farklılıklar vardır.

SCSS'in sentaksı, CSS'in sentaksına benzer, ancak bazı ek özellikler içerir. En belirgin farklılık, CSS'in süslü parantezler {} kullanması ve SCSS'in parantez () kullanmasıdır. SCSS ayrıca değişkenler, operatörler, iç içe geçmeler ve mixin'ler gibi özellikler içerir.

Bu tabloda görülebileceği gibi, CSS ve SCSS arasındaki sentaks farkı oldukça azdır. Ancak SCSS, CSS'te bulunmayan özellikler sağlar ve CSS kodunun daha düzenli, okunaklı ve yönetilebilir olmasını sağlar.

Değişkenler

SCSS, "Sassy CSS" anlamına gelir. Bu CSS'nin bir üst kümesidir ve önemli oranda kodlama hızını artırırken, CSS dosyalarınızı daha okunaklı ve yönetilebilir hale getirir. Değişkenler, SCSS'nin en önemli özelliklerinden biridir.

Değişkenler sayesinde, CSS dosyalarındaki renkler, fontlar, borderlar gibi tekrar eden özellikleri bir defaya mahsus tanımlarken, istediğiniz yerde kullanabileceğiniz bir değer gibi saklarsınız. Bu, size zaman tasarrufu sağlarken, kod okunabilirliğini de artırır. Örneğin, aynı renk değerini birkaç farklı yerde manuel olarak değiştirmeniz gerektiğinde, sadece bir kez değiştirerek tüm sayfada uygulayabilirsiniz.

Bunun yanı sıra, SCSS değişkenlerini farklı özellikler arasında da kullanabilirsiniz. Örneğin, bir öğenin genişliğini ve yüksekliğini belirlerken bu değerleri birden fazla kez kullanmanız gerektiğinde, bu değerleri bir değişkene atayarak kodunuzun daha kısa ve anlaşılır olmasını sağlayabilirsiniz.

$boyut: 250px;.genislik {  width: $boyut;}.yukseklik {  height: $boyut;}

Bu örnek kodda, $boyut değişkeni tanımlanır ve .genislik ve .yukseklik sınıflarında kullanılır. Bu sayede, 250 piksel genişlik ve yükseklik değeri hem okunaklı hem de yönetilebilir bir şekilde belirlenir.

Değişkenler sayesinde, CSS dosyalarınızda tutarlılığı sağlama konusunda da büyük kolaylık sağlar. Örneğin, bir sayfada kullanılan bir renk değerini, daha sonra oluşturacağınız bir başka sayfada tekrar kullanmak istediğinizde, sadece değişkeni çağırmak yeterli olacaktır. Bu sayede, tüm sayfaların aynı renk şemasına sahip olması garanti edilir.

Kısacası, SCSS'deki değişkenler, CSS dosyalarınızın okunabilirliğini, yönetilebilirliğini ve güncelleme sürecini kolaylaştırır. Bu özellik sayesinde, CSS kodlarınızı daha modüler hale getirebilir ve tekrar eden kodları tek bir yerden yönetebilirsiniz.

Günlük Hayatta Kullanımı

SCSS, web sitelerinin stil sayfalarını oluşturmakta sıklıkla kullanılan bir CSS ön işlemcisidir. SCSS kullanımı, CSS'ye göre daha fazla kolaylık sağlar. SCSS'nin en önemli özelliklerinden biri değişken oluşturma fonksiyonudur. Bu özellik, daha derli toplu ve anlaşılır kod yazmayı sağlar.

SCSS'de değişkenlerin kullanımı, özellikle sık sık tekrarlanan kodları kısaltmak için oldukça yararlıdır. Bu yolla değişkenlere atanmış değerler, kodda kullanılan diğer bölümlerde de geçerliliğini korur. Bu da kodun daha okunaklı ve sürdürülebilir olmasını sağlar.

Bir örnek vermek gerekirse, bir web sitesinde kullanılan renk kodları sık sık tekrar edilebilir. Bu durumda renk kodlarının hepsini değiştirmek gerektiğinde kodun tümünde yer alan renk kodlarını tek tek değiştirmek yerine değişkenler kullanarak sadece tek bir değişkenin değerini değiştirmek yeterli olur. Bu da zaman kazanmanızı ve kolaylık sağlamanızı sağlar.

Özetle, değişken kullanımı SCSS'nin en büyük avantajlarından biridir. Kodun daha okunaklı ve kullanışlı olmasını sağlar. Böylece, sık kullanılan kodları kısaltmak ve sürdürülebilir bir kod yazmak mümkündür.

Nesting

SCSS, CSS üzerine kurulan bir preprocessor'dır. SCSS kodları, CSS kodlarına dönüştürülebilir ve bu sayede CSS dosyalarının yönetimi daha kolay hale gelir. SCSS'nin önemli özelliklerinden biri de nesting özelliğidir.

Nesting, CSS'deki seçicileri yapısı içinde yerleştirme yöntemidir. Bu sayede, CSS kodları daha okunaklı ve yönetilebilir hale getirilir. Yapı içindeki seçiciler, ana seçici üzerinden belirtilir. Bu sayede, kodlama sırasında daha az tekrara yer verilir.

Örneğin, aşağıdaki CSS kodları nested kullanımı göstermektedir:

.navbar {  background-color: #333;  color: #fff;  ul {    list-style: none;    li {      display: inline-block;      a {        color: #fff;        text-decoration: none;        padding: 10px;        &:hover {          background-color: #555;        }      }    }  }}

Görüleceği üzere, seçicilerin yapısı içinde kullanımı, kod okunabilirliğini ve yönetilebilirliği arttırır. Bu yöntem, kodları daha da kullanışlı hale getirir ve daha az hata yapılmasına olanak tanır.

Nesting yöntemi aynı zamanda CSS kodlarının daha az yazılmasına olanak sağlar. Bu sayede CSS dosyalarının boyutları küçülür ve sayfa yüklenme süreleri daha kısa hale gelir. Ancak, nesting yöntemi aşırı kullanıldığında, kodların okunması zorlaşabilir ve performans sorunları ortaya çıkabilir.

Sonuç olarak, nesting yöntemi CSS kodlarının okunabilirliğini ve yönetilebilirliğini arttıran önemli bir özelliktir. Doğru bir şekilde kullanıldığında, kodlar küçültülür ve sayfa yüklenme süreleri kısaltılır. Ancak, gerekli durumlarda, nesting yöntemi ılımlı bir şekilde kullanılmalıdır.

Yazım Kuralları

SCSS kodlarının içerisinde yer alan nesting, kodların daha düzenli görünmesine ve anlaşılır olmasına yardım etmektedir. Ancak nesting işlemi doğru bir şekilde uygulanmadığında kodların okunaklılığı azalmaktadır. Bu nedenle yazım kurallarına dikkat edilmesi gerekmektedir.

Öncelikle, nesting işlemi yapıldığında her bir blok için yeni bir satır açılması gerekmektedir. Ayrıca blok açılışı "{" yapısı ile blok kapatılması "}" yapısı ile gerçekleştirilmelidir. Blok açılışından sonra girinti kullanılarak alt bloklar belirlenmelidir.

Nesting kurallarından bir diğeri ise fazla nesting işleminden kaçınmaktır. Her blok içerisinde sayısız alt blok oluşturmak yerine, gereksiz kullanımdan kaçınılmalıdır. Ayrıca nesting işlemi de her zaman kullanılmak zorunda değildir. Eğer kod düzenli ve basitse nesting kullanımına gerek kalmayabilir.

Tablo ve listenin kullanımı da nesting işleminin doğru bir şekilde uygulanmasına yardımcı olabilir. Tablo kullanarak kod bloklarını ayrı ayrı incelemek daha kolay hale gelebilir. Listeler ise kod bloklarının yapısının daha anlaşılır olmasını sağlayabilir.

Sonuç olarak nesting işlemi, SCSS kodlarının daha okunaklı ve anlaşılır hale gelmesinde önemli bir rol oynamaktadır. Fakat doğru yazım kurallarına uyulması bu işlemi verimli hale getirecektir.

Mixins Kullanımı

Mixins, CSS'de birden çok özelliği ve stil seçicilerini bir araya getiren bir özelliktir. SCSS'de, birden çok kişiye ait özellikler "mixins" kabul edilir. Bu özellik, ön yüz geliştiricilerinin stil sayfalarında sürekli tekrar etmesini önler ve stil özelliklerini tek bir yerde toplar. Bu, kodun yeniden kullanılması ve bakımın kolaylaştırılması açısından oldukça önemlidir.

Bir mixin, bir stil bileşeninin tanımını içerir, örneğin, bir butonun renk, tipografik kurallar veya boyutlandırma özellikleri. Mixin'ler, kod verimliliğini artırmak için kullanılabilir. Örneğin, birden fazla sayfada aynı butonlar kullanılıyorsa, bir mixin oluşturarak buton stil özelliklerini tek bir yerde tanımlayabilirsiniz. Bu özellik, butonları tek tek stillemek yerine, butonun stil bileşenini değiştirdiğinizde tüm web sitenizdeki butonların değiştirilmesini sağlar. Mixin'lerin kullanımı, SCSS'nin en popüler özelliklerinden biridir ve kod verimliliğini artırmak için şiddetle tavsiye edilir.

• Kod verimliliği sağlar.
• Yeniden kullanılabilir ve bakımı kolaydır.
• Sytax basittir ve stil bileşenleri için merkezi bir yerdir.

Bu nedenle, bir mixin, tasarımcıların ve geliştiricilerin özelliklerini ve kod yığınını çalışma sayfalarında birleştirmelerine olanak tanır. Kullanılacak stilleri tekrar tekrar yazmak yerine, mixin üzerinde değişiklik yaparak tüm stil bileşenlerini yeniden tanımlayabilirsiniz. Stil bileşenleri arasındaki etkileşim açısından, mixin'leri büyük bir rol oynayan SCSS, ön yüz geliştiricileri ve tasarımcılar arasındaki işbirliğinin daha kolay olmasını sağlar.

Özel Mixins'lerin Oluşturulması

SCSS'nin avantajlarını gördükten sonra, neden kendi özel Mixin'lerinizi oluşturmak isteyebileceğinizi düşünebilirsiniz. Belirli özellikleri tekrar tekrar kullanmanız gerektiğinde, özel Mixin'ler gerçekten kullanışlı olabilir. Örneğin, 8 farklı CSS yazısını yapılandırmak istediğinizi varsayalım ve her birinde renk, yazı tipi boyutu ve alanlarının aynı olmasını istediğinizi düşünelim. Bu durumda, bir özel Mixin oluşturarak tüm yazı tipleri için aynı CSS yapılandırmasını kullanabilirsiniz.

Özel Mixin'ler oluşturmak, belirli bir yapılandırmayı birden fazla kez kullanmanız gerektiğinde çok kullanışlıdır ve aynı zamanda kodunuzu daha temiz ve düzenli hale getirir. Özel Mixin'leriniz, karmaşık kodların tekrar tekrar yazılmasını önleyerek süreci kolaylaştırır ve yeniden kullanılabilir kodlar oluşturmanın bir yoludur.

Özel bir Mixin oluşturmak için önce @mixin anahtar kelimesini kullanarak bir Mixin tanımlamanız gerekir. Mixin'in adını seçin ve parantez içine Mixin'in kullanacağı herhangi bir değişken veya argüman tanımlayın. Daha sonra Mixin'in CSS kodunu tanımlamak için bir blok açın.

Örneğin:

```scss@mixin important-text { color: red; font-weight: bold;}```

Bu Mixin, kırmızı ve kalın bir stilin uygulanmasını sağlar. Ardından, Mixin'i kullanmak istediğiniz elemana @include anahtar kelimesini kullanarak Mixin'i dahil edebilirsiniz. Mixin'in adını tırnak içinde yazın ve sonrasında bir noktalı virgül koymayı unutmayın.

```scss.my-class { @include important-text;}```

Bu örnekte, my-class sınıfını aktive ederek Mixin'in CSS kodunu dahil ettik. Mixin'in yararları, karmaşık kodları bloklara ayırmaya izin vermesi, kodunuzun yeniden kullanılmasını ve CSS dosyanızın daha iyi organize edilmesini sağlamasıdır.

İçe Aktarma ve Genişletme

SCSS, dosya içe aktarma özelliği ile CSS dosyalarının daha iyi organize edilmesine olanak sağlar. SCSS'de, @import yöntemi kullanılarak tek bir SCSS dosyasına diğer tüm dosyalar dahil edilebilir. Böylece, CSS dosyaları daha kolay yönetilebilir hale gelir.

Bunun yanı sıra, genişletmeler ile tekrar eden CSS kodlarından kurtulmak mümkündür. @extend yöntemi ile bir öğeden diğer öğelere CSS kodlarını genişletebilirsiniz. Bu yöntem ile kod tekrarından kaçınmak ve daha az CSS kodu ile geniş bir yelpazede stiller oluşturmak mümkündür.

SCSS, %placeholder selector'lar özelliği ile de CSS kodlarının tekrar kullanılabilirliğini artırır. % sembolü ile tanımlanan bu seçiciler yer tutucu işlevi görür ve @extend yöntemi ile kolayca genişletilebilir.

• Dosya içe aktarma, kod tekrarından kurtulmak ve yönetim kolaylığı sağlar.
• Genişletme özelliği ile tekrar eden kodlar ortadan kaldırılır ve daha az CSS kodu kullanılarak daha geniş bir yelpaze oluşturulur.
• % placeholder Selector'lar ile tekrar kullanılabilirlik artırılır ve kodların düzeni daha sorunsuz hale gelir.

SCSS'de dosya içe aktarma, genişletmeler ve placeholder selector'lar gibi özellikler sayesinde CSS kodlarını daha düzenli, daha az kod ile daha geniş bir yelpaze oluşturacak şekilde yazmak mümkündür.

%Placeholder Selector'lar

SCSS, CSS'ten geliştirilmiş bir dil olduğu için, birçok CSS özelliğini aynen kullanabilir. Bu özelliklerden biri de %Placeholder Selector'lar. Placeholder Selector'lar, CSS'teki @extend özelliğiyle aynı işlevi görür; fakat kodların daha okunaklı ve daha düzenli görünmesini sağlar.%Placeholder Selector'lar, stil dosyasında adı verilmeyen seçicilerdir. Bu seçiciler stil dosyasında @extend kullanılarak istediğimiz yerde kullanabiliriz. Ayrıca, %Placeholder Selector'lar, öznitelik değeri de içerebilir. Örnek olarak, %btn-placeholder seçicisinde, '.btn' sınıfı için stil özellikleri tanımlanabilir. Bu stil özellikleri, .btn sınıfına ilişkin farklı stiller tanımlandığında, ilgili seçicilere tek bir yerden düzenleme yapılması sağlanır.Bir %Placeholder Selector tanımlarken, diğer SCSS blokları gibi, stil bloğunun başında '%' işareti kullanılır. Ayrıca, tanımlanan seçicinin öznitelik değerini ise ':' karakterinden sonra, tek ya da çift tırnak içinde belirtmemiz gerekir. Örneğin, %btn-placeholder { font-size: 16px; } şeklinde bir stylesheet bloğu tanımlanabilir. Bir %Placeholder Selector'u kullanmak için, stil dosyasında tanımlanırken kullanıldığı şekilde @extend yönergesi kullanılır. Örneğin, .btn-primary { @extend %btn-placeholder; background-color: blue; } şeklinde bir kod bloğunun tanımlandığını ele alalım. Bu blok, .btn-primary sınıfının düzenli bir şekilde stilinin tanımlandığı bir blok olacaktır. Ayrıca, çoklu stil kullanımında da çok daha fonksiyonel ve okunaklı hale getirir.

@extend

SCSS, CSS'e kıyasla daha da gelişmiş bir özellik ve stillendirme dilidir. Bu nedenle, SCSS kullanıcılarına CSS'te bulunmayan birçok özellik sunar. Bu özelliklerden biri de @extend kullanımıdır.

@extend, stil özellikleri paylaşan birden fazla seçiciye aynı stil özelliklerini uygulamak için kullanılan bir yöntemdir. Bu, stil kodlarını düzenlemek için çok kullanışlı bir yöntemdir. Özellikle, kodu daha az hatalı ve daha okunaklı hale getirir.

@extend kullanırken, hedef seçicinin stil özelliklerindeki tüm değişiklikler, kaynak seçicinin stil özelliklerinde de otomatik olarak yansıtılır. Bu nedenle, stil özellikleri değiştirilirse, tüm hedef seçicilerin de otomatik olarak güncellenmesi gereklidir.

@extend, satırda birden fazla seçici kullanmanın neden olduğu kod tekrarını en aza indirir. Böylece, kodun daha organize ve daha az hataya açık hale gelmesini sağlar.

Bununla birlikte, @extend kullanımı, uyarlama sorunlarına neden olabilir. Yani, bir stil özelliğinde değişiklik yapmak isterseniz, o stil özelliğine sahip tüm seçicileri değiştirmeniz gerekebilir. Aksi takdirde, sitenizde beklenmedik sonuçlar ortaya çıkacak ve çalışmayacak. Bu nedenle, @extend kullanımında dikkatli olmak önemlidir.

Sonuç olarak, @extend, CSS'ten daha yüksek seviyede bir stillendirme teknolojisidir. @extend kullanarak, kodunuzu daha az tutarsız hale getirir, kod tekrarını önler ve daha okunaklı hale getirir. Ancak, kullanırken dikkatli olmanız önemlidir ve stil özelliklerinde yapılacak değişikliklerin diğer tüm seçicilere de yansıtılması gereklidir.