Переменные

В файле variables.scss хранятся все переменные проекта.

Значение по умолчанию:

$grids: 12; // колличество колонок
$gap: 10; // отступы между элементами (если у контейнера есть .box)
$wrapper_fixed: 1360; // фиксированная ширина для класса .wrapper. Если ширина окна будет меньше ширины в переменной - ширина .wrapper будет 100%

Брейкпоинты:

$breakpoints: (
    sm:  480,
    md:  768,
    lg:  1024,
    xl:  $wrapper_fixed,
    xxl: 1680,
    re:  1920
);

Пример использования:

@include media(sm) {...}
@include media(md) {...}
@include media(lg) {...}

Создание кастомных колонок:

$custom_grids: (
    sm: (4,5),
    re: (3)
);

В примере выше будут сгенирированы классы по правилу:

.{breakpoint}_{number} > .{breakpoint}_sgrid_{index}

.sm_4 > .sm_sgrid_1 {...}
.sm_4 > .sm_sgrid_2 {...}
.sm_4 > .sm_sgrid_3 {...}
.sm_4 > .sm_sgrid_4 {...}

.sm_5 > .sm_sgrid_1 {...}
.sm_5 > .sm_sgrid_2 {...}
.sm_5 > .sm_sgrid_3 {...}
.sm_5 > .sm_sgrid_4 {...}
.sm_5 > .sm_sgrid_5 {...}

.re_3 > .re_sgrid_1 {...}
.re_3 > .re_sgrid_2 {...}
.re_3 > .re_sgrid_3 {...}

Автоматически будут созданые медиазапросы и рассчитана ширина классов

@media screen and (min-width: 480px) {
    .sm_4>.sm_sgrid_1 {
        -webkit-box-flex:0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .sm_4>.sm_sgrid_2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .sm_4>.sm_sgrid_3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .sm_4>.sm_sgrid_4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .sm_5>.sm_sgrid_1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .sm_5>.sm_sgrid_2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%
    }

    .sm_5>.sm_sgrid_3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%
    }

    .sm_5>.sm_sgrid_4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%
    }

    .sm_5>.sm_sgrid_5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media screen and (min-width: 1920px) {
    .re_3>.re_sgrid_1 {
        -webkit-box-flex:0;
        -ms-flex: 0 0 33.3333333333%;
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }

    .re_3>.re_sgrid_2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.6666666667%;
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }

    .re_3>.re_sgrid_3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

генерация z-index

$z-indexes: (
    "content",
    "fixed",
    "tooltip",
    "dropdown",
    "popup",
);

Значения генирируются про правивилу {index} * 10

Пример

.class_1 {z-index: zindex('content')}
.class_2 {z-index: zindex('content')+2}
.class_3 {z-index: zindex('tooltip')+6}
.class_4 {z-index: zindex('popup')}

Результат

.class_1 {z-index: 1}
.class_2 {z-index: 3}
.class_3 {z-index: 36}
.class_4 {z-index: 50}