Sass kullanılır mı?

RaSGooL · 24 Şubat 2023

Sass, Less, scss bunlar fazlasıyla kullanılan teknolojiler. Öğrenmekten zarar gelmez. Ek bilgi olarak Bootstrap scss kullanıyor.

kaan.w · 24 Şubat 2023

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.

Birini hedef gösterir gibi yazmışım kusura bakmayın hocam. Konu sahibine Bootstrap ile karşılaştırmaması gerektiğini söylemek istdedim.

ersi · 24 Şubat 2023

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

yone1108 · 24 Şubat 2023

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

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

Sass muhteşem bir şey arkadaşlar.

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

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

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ı.

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?

Fatalis · 28 Şubat 2023

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?

Örnek HTML yapısı:

HTML:

<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:

.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.

yone1108 · 28 Şubat 2023

Fatalis dedi:
Örnek HTML yapısı:

HTML:

<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:

.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.

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

Fatalis · 28 Şubat 2023

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

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:

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:

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:

@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.

yone1108 · 28 Şubat 2023

CSS:

.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

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:

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:

@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.

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

kaan.w · 28 Şubat 2023

yone1108 dedi:
CSS:

.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ı

Bunun için çokta mixine gerek yok açıkçası. 2 tane renk kullanmışsınız tekrar tekrar sadece. Onları değişkene atayıp değişkeni verin bg-color ve color kısımlarına.

yone1108 · 28 Şubat 2023

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.

Projeye tamamen hakim oluyorsunuz.

Projedeki karışıklıklar tamamen gidiyor.

Projede nokta atışı yapabiliyorsunuz.

Proje oldukça düzgün bir yapı haline geliyor.

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?

CSS:

@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;
            }
        }
    }
}

Böyle bir mixin oluşturdum ve istediğim işlemi sağlıyor. Mesela sitenin sağ tarafına yuvarlak resim koyarken parametreden ayarlayabiliyorum yada kare resim olacaksa yine aynı şekilde blog-card classını birden çok yerde kullanabiliyorum. Sorum şu bu doğru bir kullanım mı? Bu kadar fazla parametre vermem yanlış bir şey mi bunları merak ediyorum

Sass kullanılır mı?

RaSGooL

Kilopat

kaan.w

Megapat

ersi

Decapat

yone1108

Decapat

Fatalis

Terapat

yone1108

Decapat

Fatalis

Terapat

yone1108

Decapat

kaan.w

Megapat

yone1108

Decapat