SASS ile Web Sitelerinizi Özelleştirin

Web sitelerinizi özelleştirmek hayal gücünüze bağlıdır. Hayal gücünüze güveniyorsanız css ile profesyonel web siteleri ortaya çıkartabilirsiniz. SASS kodları ile web sitenizi kendi kod stilinize göre şekillendirerek rahat bir css kombinasyonu yaratabilirsiniz. İhtiyacınız olan her şeyi tanımlamak için HTML öğelerinin bir web sayfasında nasıl görüntülenmesi gerektiğini etkili bir şekilde tanımlamak çok önemlidir. Ancak büyük, karmaşık sitelerle çalışmaya başladığınızda, CSS’nin daha iyi olup olmayacağını merak etmeye başlayabilirsiniz. Bu düşünceleri artık unutun! Çünkü SASS ile css kodlarınızı ayrıştırabileceksiniz.

SASS nedir?

SASS (Sözdizimsel Müthiş Stil Sayfaları), CSS yazmayı çok daha güçlü hale getiren değişkenler, matematiksel işlemler, karışımlar, döngüler, işlevler, içe aktarmalar ve diğer ilginç işlevleri kullanmanızı sağlayan bir CSS ön işlemcisidir. Bazı yönlerden, SASS’ı bir stil sayfası genişletme dili olarak düşünebilirsiniz, çünkü temel bir programlama dilinin faydalarını sunarak standart CSS özelliklerini genişletir. Böylece SASS kodunuzu derleyecek ve tarayıcının anlayabileceği CSS çıktısını oluşturacaktır.

SASS NEDİR ?

Evet, sadece “programlama dili” ni okudunuz ama bu gerçekten temel şeyler. Bir programcıysanız, özel web tasarım düşünceniz var ise SASS derlemeniz çok kısa sürecektir. Ancak kodlama deneyiminiz yoksa, öğrenme eğliminiz biraz daha yüksek olacaktır. SASS ile CSS öğrendikten sonra, artık sıfırdan CSS yazmazsınız.

SASS kullanımının avantajları şunlardır:

CSS sözdizimi dostudur.

CSS biliyorsanız SASS biliyorsunuz. SASS iki farklı sözdizimiyle gelir: SASS’ın kendisi ve en çok kullanılan SCSS. SCSS sözdizimi CSS uyumludur, bu nedenle .css dosyanızı .scss olarak yeniden adlandırmanız yeterlidir.

Tabii ki, bunu yaparak SASS’ın sağladığı süper güçleri ve yetenekleri kullanmıyorsunuz, ancak en azından SASS’ı kullanmaya başlamak için çok zaman harcamanıza gerek olmadığını fark ediyorsunuz. 

İstediğiniz alanlar için özel değişkenler oluşturma imkanı sunar.

SASS gibi bir CSS ön işlemcisi kullanmanın en büyük avantajlarından biri değişken kullanma yeteneğidir. Değişken, bir değeri veya bir değer kümesini depolamanıza ve bu değişkenleri SASS dosyalarınızda istediğiniz kadar ve istediğiniz yerde yeniden kullanmanıza olanak tanır. Böylece sitenizdeki tüm renkleri tek bir değişkenle değiştirebilirsiniz.

Her yerde muhteşem kırmızı renkte bir site oluşturduğunuz bir senaryo düşünün; düğmeler, menüler, simgeler, kaplar, vb. Birkaç harika da yazı tipi kullanıyorsunuz: Lato ve Eurostile. Geleneksel CSS kullanarak aynı kodu tekrar tekrar tekrarlamanız gerekir, ancak SASS ile bu değerleri değişken olarak tanımlayarak anında değiştirebilirsiniz.

Örnek kod:

// Değişken kodumuz

$kirmizi: #ea2c2c;

$lato-font: ‘Lato’, sans-serif;

$euro-font: ‘Eurostile’, sans-serif;


// Yukarıdaki kodlarda 3 farklı değişken atadık. 1. Renk kodu, 2. Font kodu ve 3. De farklı bir font kodu bu kodların içeriğini kendinize göre düzeltip istediğiniz alanları özelleştirebilirsiniz.

Değişkenleri oluşturduktan sonra bu kodları sayfa içinde kullanabilirsiniz.

Örnek kod:

H3 {        

    font: $euro-font;

    color: $kirmizi;

  }

  a {

    font: $lato-font;

    background-color: $kirmizi;

  }

SCSS dosyalarınızı derlediğinizde, SASS kullandığınız değişkenlerle ilgilenir ve değişken adını depolanan değeri ile değiştirir.  Ve elbette, rengin değerini değiştirmek, değişken içeriği güncellemek ve yeniden derlemek kadar hızlıdır. CSS dosyanızdaki renkleri güncellemek için metin düzenleyicinizde “Bul ve Değiştir” i kullanma günleri geride kaldı.

Zaman artık sizin ellerinizde!

Geliştirilmiş söz dizimi kullanır.

CSS ön işlemcilerinin bir başka fantastik yararı da geliştirilmiş sözdizimidir. SASS, daha geniş bir işlev gerçekleştiren başka bir kod parçası içinde yer alan kod olan iç içe bir sözdizimi kullanmanıza olanak tanır. SASS’ta öğeleri hedeflemenin daha temiz bir yolunu sağlar. Başka bir deyişle, HTML öğeleriniz için CSS seçicileri kullanarak iç içe yerleştirebilirsiniz.

Geliştirilmiş söz dizimi faydaları:

  • Daha doğal sözdizimi ve çoğu durumda okunması kolay
  • Seçicileri birden çok kez yeniden yazma ihtiyacını önler
  • Özel web tasarım yapmak için anlaşılabilir ve hızlı kod yapısı …
  • Daha sürdürülebilir kod.

İç içe SASS (SCSS sözdizimi) kodu örneği:

.paketler {

    perspective: 150rem;

    -moz-perspective: 150rem;

    position: relative;

    height: 52rem;

    &__on {

        background-color: $anarenk-koyu-mavi;

        height: 52rem;

        transition: all .8s ease;

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        &–onyazi {

            transform: rotateY(180deg);

            &-1 {

                background-image: linear-gradient(to right bottom, #545454, #000000);

            }

            &-2 {

                background-image: linear-gradient(to right bottom, #545454, #000000);

            }

            &-3 {

                background-image: linear-gradient(to right bottom, #545454, #000000);

            }

        }  

    }

Ancak, çok derinlemesine iç içe yerleştirmenin iyi bir uygulama olmadığını unutmayın. Ne kadar derine inerseniz, SASS dosyası o kadar ayrıntılı olur ve derlendiğinde yuvalama düzleştirildiğinden, derlenen CSS potansiyel olarak büyür.

Sınırsız SCSS sayfaları bölüp, ekleyip özelleştirebilirsiniz.

Projeniz büyüdükçe ve daha karmaşık hale geldikçe, stil sayfalarınız da büyür. 5.000 satırlık stil sayfanıza yorumlar ekleyebilir ve ardından metin düzenleyicinizde belirli bir deseni arayabilirsiniz, ancak bu harika bir çözüm değildir. Veya CSS dosyanızı 20 küçük parçaya bölebilirsiniz, ancak daha sonra içe aktardığınız her .css dosyası için bir HTTP isteğiniz olur. Bunu da istemiyorsun.

Neyse ki SASS @import kuralına sahiptir. @import daha küçük SASS dosyalarını içe aktararak kodunuzun modüle edilmesini sağlar. Bu ve CSS @import kuralı arasındaki fark, içe aktarılan tüm SCSS dosyalarının tek bir CSS dosyasında birleştirilmesidir.

SCSS / SASS dosyalarını içe aktarmak gerçekten kolaydır:

@import “layout/footer”;

@import “layout/menu”;

@import “bilesenler/projeler”;

@import “bilesenler/form”;

@import “bilesenler/popup”;

@import “bilesenler/slider”;

Gördüğünüz gibi, dosya uzantısı adını vermek zorunda değilsiniz ve içe aktarma yolu da dizinler içerebilir, bu da SASS çalışma dizininize istediğiniz yapıyı verebileceğiniz anlamına gelir. 

SASS’ın projenizi nasıl özelleştirebileceğinizle ilgili sorularınız, şüpheleriniz veya endişeleriniz mi var ise Bize bir yorum bırakın. Yardımcı olmak isteriz.

Paylaş:

Cevap Bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir