Импорт одних и тех же стилей / файлов в несколько циклов SASS - PullRequest
Новая
       14

Импорт одних и тех же стилей / файлов в несколько циклов SASS

0 голосов
/ 23 октября 2018

Я работаю над небольшой внутренней утилитарной библиотекой, но наткнулся на что-то, что мне не нравится.

Допустим, я хочу создать некоторые базовые классы, а затем создать те же классы, но для адаптивного использования.

Очень простой пример этого будет: 

@for $i from 0 through $loopCount {
    .pt-#{$i} {
        padding-top: size($i);
    }
}

@for $i from 0 through $loopCount {
    @media all and (max-width: 576px) {
        .sm\:pt-#{$i} {
            padding-top: size($i);
        }
    }
}

@for $i from 0 through $loopCount {
    @media all and (max-width: 768px) {
       .md\:pt-#{$i} {
            padding-top: size($i);
        }
    }
}

Если бы я применил эту систему ко многим другим классам свойств, она станет неуправляемой и грязной.

В идеале я хотел бы, чтобы все мои служебные интервалы (margin и padding) были в файле, который просто содержит начальные классы: 

.pt-#{$i} {
    padding-top: size($i);
}

, а затем импортировал этот файл в глобальный файл, который выполняет циклы, например 

@for $i from 0 through $loopCount {
    @import "_spacing";
    @import "_borders";
}

@for $i from 0 through $loopCount {
    @media all and (max-width: 576px) {
        @import "_spacing";
        @import "_borders";
    }
}

Однако @import нельзя использовать внутри циклов.Есть ли способ, которым я могу сделать это с помощью SASS?

Я также буду «ставить префиксы» для адаптивных классов, чтобы не было проблем с именованием, а скорее с возможностью использования одного и того же набора классов.внутри нескольких циклов.

РЕДАКТИРОВАТЬ: Используя миксины, я добился того, чего хотел, теперь это пример того, что у меня есть: 

@import "groups/_spacing";
@import "groups/_flex";

.u\: {
    @include flex();

    @for $i from 0 through $loopCount {
        @include spacing($i);
    }
}

.u\@sm\: {
    @media all and (max-width: $breakpoint-small) {
        @include flex();

        @for $i from 0 through $loopCount {
            @include spacing($i);
        }
    }
}

Я сейчас пытаюсь уменьшить это дублирование дажедальше, но это намного лучше, чем я, что я делал раньше.

...