src source'un kısaltması yani build edilmemiş hali.
dist (bunu bilmiyorum ama tahminen) distributor den geliyor dosyaların build edilmiş dağıtıma hazır hali

.Hidden class'ındaki right: -100px i right: 0px yaptığında tamamen görünüyor.

Performans konusunu bilmem.
performans konusunda dbye yük bindirmek istemiyorsan sürekli sorgudan veya sorgularda ne var ne yok herşeyi çekmek performansı etkiler.

SELECT `id`, `name`, `date` FROM `table_name`

yukarıda olduğu gibi sadece gerekli olanları çekmek.
eğer sürekli güncel verinin gelmesi önemli değilse cache kullanarak sürekli sorgudan kurtulursun.
$db değişkeninine null değeri verdikten sonra işlem yapamazsın.null değeri vermeden önce sorguları yapman gerekir.

Sorgunun sonunda bunu kullanırsan istediğin gibi olur.Büyükten küçüğe(z-a) DESC yerine ASC yaparsan küçükten büyüğe(a-z) sıralar.

ORDER BY `id` DESC

birden fazla stünda sıralama yaptırabilirsin

ORDER BY `id` DESC, `name` ASC

https://www.google.com/search?q=order+by+kullanımı

sass pek bilgim yok ama @extend diye bişey var
aşağıdaki linkten örneklerine bakabilirsin.
https://sass-lang.com/documentation/at-rules/extend

Kaynak: https://stackoverflow.com/questions/36957904/media-queries-in-sass

$media_queries : (
    'sm'    : "(min-width: 768px)",
    'md'    : "(min-width: 992px)",
    'lg'   : "(min-width: 1200px)",
);

@mixin for_breakpoint($breakpoints) {
    $conditions : ();
    @each $breakpoint in $breakpoints {
        // If the key exists in the map
        $conditions: append(
            $conditions,
            #{inspect(map-get($media_queries, $breakpoint))},
            comma
        );
    }

    @media #{$conditions} {
        @content;
    }

}
.box {
    width: 50%;
    margin: 0 auto;
    background-color: red;
    text-align: center;
    padding: 15px;
    @include for_breakpoint('lg'){
        background-color: blue;
    }
    @include for_breakpoint('md'){
        background-color: orange;
    }
    @include for_breakpoint('sm'){
        background-color: purple;
    }
}
h1 {
    font-size: 48px;
    @include for_breakpoint('lg'){
        font-size: 38px;
    }
    @include for_breakpoint('md'){
        font-size: 24px;
        font-weight: normal;
    }
    @include for_breakpoint('sm'){
        font-size: 18px;
        font-weight: bold;
    }
}

$para = floatval("-1000.59");
$para = number_format($para, 2, ',', '.');
echo $para;