Kategori: Sass-Scss

SCSS'de döngüler yani each, for ve while kullanımı ile devam ediyoruz. SCSS'deki each, for ve while döngülerini tıpkı programlama dillerinde olduğu gibi kullanıyoruz. Sadece birkaç küçük değişiklik yapıyoruz. Örneğin önlerine "@" işaretini yazmak gibi..

Bugün programlama dillerinden aşina olduğumuz if-else yapılarının SCSS'de nasıl kullanıldığına bakacağız. SCSS'deki if-else kullanımı ile artık Css kodlarımızı yazarken koşullu ifadelerden faydalanabiliyoruz.

Bildiğiniz gibi bu Css3 özellikleri eski tarayıcılarda problem oluşturabiliyor. Bu uyumluluk problemlerini çözmek için Css3 özelliklerinin bazılarını ön-ekler ile birlikte kullanıyoruz. Örneğin transform özelliğini kullanırken tüm tarayıcılarda düzgün bir şekilde çalışması için şöyle yazıyoruz.

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 kodları tek sayfada 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 …

SCSS'de inheritance yani miras alma yöntemi ile kod tekrarının önüne geçebiliyoruz. Kullanımı oldukça kolay. SCSS'de miras almayı bir örnek üzerinde göstermek istiyorum.

SCSS derslerimize kaldığımız yerden devam ediyoruz. Bu yazımda SCSS'de Nesting yani iç içe seçiciler konusunu anlatacağım. İç içe seçiciler ile yazacağımız kodları hem daha düzenli olarak yazıyoruz hem de kod tekrarından kurtulmuş oluyoruz.

SCSS derslerimize Variables yani Değişkenler ile başlıyoruz. Değişkenleri kullanarak Css kodlarımızı dinamik bir hale getirebiliriz. İlk olarak değişken kullanmanın bize ne gibi faydalar sağlayacağından bahsedelim. Sonrasında ise SCSS'de değişken kullanımı nasıl yapılıyor ona bakalım.

SASS veya SCSS kullanmak için birçok editör bulunuyor. En çok tercih edilen ve benim de kullandığım editör ise Visual Studio Code'dur. Bu yazımda Visual Studio Code'da yazmış olduğumuz SCSS kodlarını nasıl Css kodlarına dönüştürebiliceğimizi göstereceğim.

Css'i belli bir seviyede öğrendikten sonra sizde Css kodları yazarken kod tekrarı yapıldığının farkındasınızdır. Çünkü yazdığımız Css kodları dinamik değil statiktir.