Sass kullanılır mı?

Fatalis dedi:

Beni diyorsanız ben Bootstrap ile karşılaştırmadım. Bootstrap veya türevlerini kullanmıyorsa bir kişi ya Tailwind kullanıyordur ya da kendi kodunu kendisi yazıyordur ve kendi kodunu kendisi yazan biri için SASS çok iyi. Ortada herhangi bir karşılaştırma yok.

Genişletmek için tıkla...

ersi dedi:

sass mükemmeldir, kullanmanızı tavsiye ederim, önce css iyi hakim olmanız lazım

Genişletmek için tıkla...

1. Projeye tamamen hakim oluyorsunuz.
2. Projedeki karışıklıklar tamamen gidiyor.
3. Projede nokta atışı yapabiliyorsunuz.
4. Proje oldukça düzgün bir yapı haline geliyor.
5. Farklı projelerde kullanmak üzere componentsler geliştirebiliyorsunuz.

Fatalis dedi:

Boostrap gibi kalıp bir kütüphaneye bağlı kalmak istemiyorsan, ben nasıl istersem borumu öyle öttürürüm arkadaş diyorsan kesinlikle kullanılmalı. Sadece nesting özelliği için bile kullanılır SASS. Ayrıca biraz modifikasyonla HTML BEM metodolojisini de çok rahatlıkla kullanabilir hale geliyorsunuz SASS'ta, ancak CSS'te BEM yazmak çok daha uğraştırıcı.

Genişletmek için tıkla...

yone1108 dedi:

Mesela bir resmi ben hem yuvarlak hem kare olarak kullanmak istiyorum aynı zamanda boyutları da değişik olacak. Örnek vermek gerekirse ürünleri listelediğim bir site var ve ana sayfada kare ve daha büyük resimler kullanmak istiyorum. Sağ tarafta ise yuvarlak ve daha küçük boyutta resim kullanmak istiyorum bunun için sass da nasıl bir yol izleyebilirim?

Genişletmek için tıkla...

<div class="products">
    // Kare
    <div class="product-box square">
        // içerik
    </div>

    // Yuvarlak
    <div class="product-box rounded">
        // içerik
    </div>
</div>

.products {
    display: grid;

    .product-box {
        background: #fafafa;

        &.square {
            // style
        }

        &.rounded {
            border-radius: 50%;
        }
    }
}

Fatalis dedi:

Örnek HTML yapısı:

HTML:Panoya kopyala

<div class="products">
    // Kare
    <div class="product-box square">
        // içerik
    </div>

    // Yuvarlak
    <div class="product-box rounded">
        // içerik
    </div>
</div>

Örnek SASS (SCSS) kodları:

CSS:Panoya kopyala

.products {
    display: grid;

    .product-box {
        background: #fafafa;

        &.square {
            // style
        }

        &.rounded {
            border-radius: 50%;
        }
    }
}

& ile elemanın sahip olduğu diğer classları seçebiliyorsun, &.rounded ile ben product-box elemanının rounded classına sahip olan versiyonuna border-radius: 50% vermiş oldum.

Genişletmek için tıkla...

yone1108 dedi:

Mixini ne amaçla kullanıyoruz onu biliyor musunuz? Nerelerde kullanılır yani

Genişletmek için tıkla...

button {
    border-top-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

@mixin button-border {
    border-top-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

/* Birincil buton */
.button {
    @include button-border
}

/* İkincil buton */
.button-secondary {
    @include button-border
}

/* Devre dışı buton */
.button-disabled {
    @include button-border
}

/* Hata veren buton */
.button-err {
    @include button-border
}

.btn{
    border: none;
    padding: 18px 25px;
    font-size: 14px;
    border-radius: 20px;
    transition: all 0.2s;

    &--default{
        @extend .btn;
        background-color: #F2F4F7;
        color: #101828;

        &:hover{
            background-color: #101828;
            color: $color-white;
            cursor: pointer;
        }
    }

    &--dark{
        @extend .btn;
        background-color: #101828;
        color: $color-white;

        &:hover{
            background-color: #F2F4F7;
            color: #101828;
            cursor: pointer;
        }
    }
}

Fatalis dedi:

Mixinler component görevi görebilen bir özellik, yaptığın projede bir kod bloğunu birden fazla yerden kullanman gerektiğini düşünüyorsan bunu mixin haline getirip kullanmak istediğin her yerde tek tek aynı kodları yazmak yerine direkt mixin'i çağırabilirsin. Bunun için ufak bir örnek vereyim, bir UI tasarlıyorsun ve tasarladığın UI'daki butonun sadece sağ alt ve sol üst kısmından border-radius veriyorsun. Yani ortada şöyle bir tasarımın var:

Eki Görüntüle 1685134

Bu benim güncel olarak geliştirdiğim UI'dan bir görüntü, genelde bu tarz butonlar tek bir component şeklinde olurlar zaten ama ben örnek vermek için bu şekilde anlatıyorum sadece. Bu butonun sağ alt ve sol üst kısmını bu şekile getirmek için şu kodlara ihtiyacın var:

CSS:Panoya kopyala

button {
    border-top-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

Bu kodu site içerisinde farklı şekillerde kullanacağın her button için tekrar yazmaktansa bu iki kodu bir mixin içine ekleyip sadece mixini çağırabilirsin.

CSS:Panoya kopyala

@mixin button-border {
    border-top-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

/* Birincil buton */
.button {
    @include button-border
}

/* İkincil buton */
.button-secondary {
    @include button-border
}

/* Devre dışı buton */
.button-disabled {
    @include button-border
}

/* Hata veren buton */
.button-err {
    @include button-border
}

Bu şekilde @include ederek sitemde kullanacağım 4 farklı buton için de bu attribute'ları uygulamış oluyorum rahatça, hepsini tekrar tekrar yazmama gerek yok. Ayrıca bu mixinler parametre de alabiliyorlar haberin olsun, onları bir fonksiyon gibi de kullanabilirsin yani. Bu sadece basit bir örnek, bundan çok daha verimli kullanabileceğin yollar var, bu verdiğim örneği mixin olmadan da yapabilirdin zaten multiple class vererek amaç neden kullanıldığını anlatabilmek.

Genişletmek için tıkla...

yone1108 dedi:

CSS:Panoya kopyala

.btn{
    border: none;
    padding: 18px 25px;
    font-size: 14px;
    border-radius: 20px;
    transition: all 0.2s;

    &--default{
        @extend .btn;
        background-color: #F2F4F7;
        color: #101828;

        &:hover{
            background-color: #101828;
            color: $color-white;
            cursor: pointer;
        }
    }

    &--dark{
        @extend .btn;
        background-color: #101828;
        color: $color-white;

        &:hover{
            background-color: #F2F4F7;
            color: #101828;
            cursor: pointer;
        }
    }
}

Şu şekilde bir button componenti oluşturdum ama bunu mixin ile daha kolay yapabiliriz o zaman doğru mu



Yada üst kısımda sorduğum resim olayını mixine parametre vererek yapabilir miyim? Yoksa sizin verdiğiniz örnek mi mantıklı

Genişletmek için tıkla...

yone1108 dedi:

Şuan öğrendiğim kadarıyla hoşuma giden birincisi veriable olayı ikincisi nesting olayı hoşuma gitti

Sass muhteşem bir şey arkadaşlar.

1. Projeye tamamen hakim oluyorsunuz.
2. Projedeki karışıklıklar tamamen gidiyor.
3. Projede nokta atışı yapabiliyorsunuz.
4. Proje oldukça düzgün bir yapı haline geliyor.
5. Farklı projelerde kullanmak üzere componentsler geliştirebiliyorsunuz.

CSS kodlarını kendiniz yazıyorsanız eğer kesinlikle kullanılması gereken bir programlama dilidir.



Mesela bir resmi ben hem yuvarlak hem kare olarak kullanmak istiyorum aynı zamanda boyutları da değişik olacak. Örnek vermek gerekirse ürünleri listelediğim bir site var ve ana sayfada kare ve daha büyük resimler kullanmak istiyorum. Sağ tarafta ise yuvarlak ve daha küçük boyutta resim kullanmak istiyorum bunun için sass da nasıl bir yol izleyebilirim?

Genişletmek için tıkla...

@mixin blog-card($grid-columns, $grid-rows, $font-size, $img-w, $img-h, $img-radius, $bg-color){
    display: grid;
    grid-template-columns: $grid-columns;
    grid-template-rows: $grid-rows;
    box-shadow: 0px 5px 20px 0px RGB(88 83 153 / 10%);
    transition: all 0.3s;
    margin-bottom: 15px;
    align-items: center;
    gap: 15px;
    background-color: $bg-color;
    padding: 25px;
    border-radius: 10px;

    &--category{
        font-size: 15px;
        font-weight: 500;
        display: inline-flex;
        border-bottom: 5px solid $color-secondry;
    }

    &--img{
        width: $img-w;
        height: $img-h;
        border-radius: $img-radius;
        object-fit: cover;
    }

    &--title{
        font-size: $font-size;
        font-weight: 600;
        margin-top: 15px;

        a{
            color: $color-primary;
            text-decoration: none;
            background: linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1));
            background-position: 0% 100%;
            background-repeat: no-repeat;
            background-size: 0% 2px;
            transition: background-size .3s;

            &:hover, a:focus{
                background-size: 100% 5px;
            }
        }
    }
}