Refactoring Mixin for handle Media Query #47

Open
opened 2 years ago by HerrHase · 0 comments
Owner

There are a few mixins to handle media queries, but with this,

@mixin media-add-typography($class) {
    .#{$class} {
        @content;
    }

    @include media-xs() {
        .#{$class}-xs {
            @content;
        }
    }

    @include media-sm() {
        .#{$class}-sm {
            @content;
        }
    }

    @include media-md() {
        .#{$class}-md {
            @content;
        }
    }

    @include media-lg() {
        .#{$class}-lg {
            @content;
        }
    }

    @include media-xlg() {
        .#{$class}-xlg {
            @content;
        }
    }
}

there seems a way to reduce the most of the mixins, and use this a general way to handle the breakpoints.

There are a few mixins to handle media queries, but with this, ``` @mixin media-add-typography($class) { .#{$class} { @content; } @include media-xs() { .#{$class}-xs { @content; } } @include media-sm() { .#{$class}-sm { @content; } } @include media-md() { .#{$class}-md { @content; } } @include media-lg() { .#{$class}-lg { @content; } } @include media-xlg() { .#{$class}-xlg { @content; } } } ``` there seems a way to reduce the most of the mixins, and use this a general way to handle the breakpoints.
HerrHase added the enhancement label 2 years ago
HerrHase self-assigned this 2 years ago
HerrHase added this to the 0.6.0 milestone 2 years ago
HerrHase modified the milestone from 0.6.0 to 0.7.0 2 years ago
Sign in to join this conversation.
No Milestone
No project
No Assignees
1 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: tiny-components/plain-ui#47
Loading…
There is no content yet.