Менее CSS адаптивный модификатор - PullRequest
Новая
       2

Менее CSS адаптивный модификатор

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

Я пытаюсь создать коллекцию CSS-классов в первую очередь для утилит, похожих на Tailwind, но в Less.Большая часть этого заключается в использовании адаптивных модификаторов, использующих этот синтаксис className: .large\:text-white.

Приведенный ниже код прекрасно работает, за исключением одной вещи: \: не должен отображаться в классах по умолчанию (классы вне медиазапросов. Они должны отображаться с использованием точки, как и ожидалось .foo.

Я не могу понять, как решить эту проблему. 

@screens: {
    small:          320px;
    medium:         768px;
    large:          1024px;
}

@padding: {
    0:              0;
    10:             1rem;
    20:             20rem;
    30:             30rem;
}

@colors: {
    white:          #fff;
    silver:         hsla(0, 0%, 90%, 1);
}

@responsive-modifiers: true;

#config () {
    .generate(pt, padding, @padding);
    .generate(py, padding-top, @padding);
    .generate(text, color, @colors);
    .generate(background, background-color, @colors);
}

// Call the mixin
#config();


each(@screens, {
    @media (min-width : @value) {
        .@{key} when (@responsive-modifiers = true) {
            #config();
        }
    }
})

.generate(@prefix, @property, @list) {
    each(@list, {
        &\:@{prefix}-@{key} {
            @{property}: @value;
        }
    });
}

1 Ответ

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

Я решил это, добавив переменную точка / точка.Вот окончательный код.Хорошо работает: 

@screens: {
    small:          320px;
    medium:         768px;
    large:          1024px;
}

@padding: {
    0:              0;
    10:             1rem;
    20:             20rem;
    30:             30rem;
}

@colors: {
    white:          #fff;
    silver:         hsla(0, 0%, 90%, 1);
}

@responsive-modifiers: true;

#config () {
    .generate(pt, padding, @padding);
    .generate(py, padding-top, @padding);
    .generate(text, color, @colors);
    .generate(background, background-color, @colors);
}

@period: .;
@{period} {
    #config();
}


each(@screens, {
    @media (min-width : @value) {
        .@{key}&\: when (@responsive-modifiers = true) {
            #config();
        }
    }
})

.generate(@prefix, @property, @list) {
    each(@list, {
        &@{prefix}-@{key} {
            @{property}: @value;
        }
    });
}
...