Question

我试图制作一个mixin来产生类似于以下的结果：

@media (max-width: 767px)
{
    .m-text-left
    {
        text-align: left;
    }
    .m-text-right
    {
        text-align: right;
    }
    .m-text-center
    {
        text-align: center;
    }
    .m-float-right
    {
        float: right;
    }
    .m-float-left
    {
        float: left;
    }
    .m-float-none
    {
        float: none;
    }
    .m-text-justify
    {
        text-align: justify;
    }
    .m-hide
    {
        visibility: hidden;
        overflow: hidden;

        max-height: 0;
    }
    .m-remove
    {
        display: none;
    }
}
/* Portrait tablet to landscape */

@media (min-width: 768px) and (max-width: 1029px)
{
    .t-text-left
    {
        text-align: left;
    }
    .t-text-right
    {
        text-align: right;
    }
    .t-text-center
    {
        text-align: center;
    }
    .t-float-right
    {
        float: right;
    }
    .t-float-left
    {
        float: left;
    }
    .t-float-none
    {
        float: none;
    }
    .t-text-justify
    {
        text-align: justify;
    }
    .t-hide
    {
        visibility: hidden;
        overflow: hidden;

        max-height: 0;
    }
    .t-remove
    {
        display: none;
    }
}
/* Landscape to small desktop */

@media (min-width: 1030px)
{
    .d-text-left
    {
        text-align: left;
    }
    .d-text-right
    {
        text-align: right;
    }
    .d-text-center
    {
        text-align: center;
    }
    .d-float-right
    {
        float: right;
    }
    .d-float-left
    {
        float: left;
    }
    .d-float-none
    {
        float: none;
    }
    .d-text-justify
    {
        text-align: justify;
    }
    .d-hide
    {
        visibility: hidden;
        overflow: hidden;

        max-height: 0;
    }
    .d-remove
    {
        display: none;
    }
}

这是我写的mixin：

@mixin respond($responsive-classes) {
    @each $screen, $query in (
        m: max-width $small-screen,                             // Phones
        p: min-width $small-screen+1 max-width $medium-screen,  // Phones to Phablets
        t: min-width $medium-screen+1 max-width $large-screen,  // Phablets to Tablets
        l: min-width $large-screen+1 max-width $wide-screen,    // Tablets to Desktops
        d: min-width $wide-screen+1) {                          // Desktops
        @include media($query, $grid-columns) {
            @each $selector, $properties in $responsive-classes {
                @if (length($properties) == 1 AND length(nth($properties, 2)) > 1) {
                    @each $value in nth($properties, 2) {
                        .#{$screen}-#{$selector}-#{$value} {
                            #{nth($properties, 1)}: #{$value};
                        }
                    }
                } @else {
                    @each $property, $value in $properties {
                        .#{$screen}-#{$selector} {
                            #{$property}: #{$value};
                        }
                    }
                }
            }
        }
    }
}

这就是我使用它的方式：

@include respond((
  (text, (text-align, (left, right, center, justify))),
  (float, (float, (left, right, none))),
  (hide, (visibility, hidden), (overflow, hidden), (max-height, 0)),
  (remove, (display, none))
    ));

这是我得到的结果：

@media screen and (max-width: 480px) {
    .m-float,
    .m-text {
        left: right
    }
}
@media screen and (min-width: 481px) and (max-width: 620px) {
    .p-float,
    .p-text {
        left: right
    }
}
@media screen and (min-width: 621px) and (max-width: 955px) {
    .t-float,
    .t-text {
        left: right
    }
}
@media screen and (min-width: 956px) and (max-width: 1200px) {
    .l-float,
    .l-text {
        left: right
    }
}
@media screen and (min-width: 1201px) {
    .d-float,
    .d-text {
        left: right
    }
}
.hide {
    visibility: hidden;
    overflow: hidden;
    max-height: 0
}

忽略媒体查询;我知道他们与众不同。这是我想要的总体最终结果。

Answer 1

我正在放入列表而不是地图。

The Mixin：

@mixin respond($modifier-class) {
    @each $screen, $query in (
        m: max-width $small-screen,                                 // Phones
        p: min-width $small-screen + 1 max-width $medium-screen -1, // Phones to Phablets
        t: min-width $medium-screen max-width $large-screen,        // Phablets to Tablets
        l: min-width $large-screen + 1 max-width $wide-screen - 1,  // Tablets to Desktops
        d: min-width $wide-screen) {                                // Desktops
        @include media($query) {                                    // Mixin from Bourbon's Neat
            @each $selector, $rules in $modifier-class {
                @each $property, $values in $rules {
                    @if (type-of($values) == "list") {
                        @each $value in $values {
                            .#{$screen}-#{$selector}-#{$value} {
                                #{$property}: $value;
                            }
                        }
                    } @else {
                        .#{$screen}-#{$selector} {
                            #{$property}: $values;
                        }
                    }
                }
            }
        }
    }
}

电话：

$modifier-classes: (
        text:   ( text-align:   (left, right, center, justify)  ),
        float:  ( float:        (left, right, none)             ),
        hide:   ( visibility:   hidden,
                  overflow:     hidden,
                  max-height:   0,                              ),
        remove: ( display:      none                            )
);

@include respond($modifier-classes);

SASS动态响应类mixin？

1 个答案: