Question

我的原始代码已根据建议的解决方案进行了大量修改和简化，其当前版本为：

// List of properties for each class
@mixin property($list) {
    padding-top: nth($list, 1);
    padding-bottom: nth($list, 2);
    font-size: nth($list, 3);
    line-height: nth($list, 4);
    }

// Function to build each class
@mixin build($element, $device, $type) {
    $i: 10;
    @each $list in $type {
        .#{$element}-#{$device}-#{$i} {
            @include property($list);
            }
            $i: $i + 5;
        }
    }

// Type list values
$paragraph: (
    (5px, 5px, 15px, 20px), // 10
    (7px, 8px, 20px, 30px), // 15
    (8px, 7px, 30px, 35px)  // 20
);

// Extra small devices
@include build('p', 'xs', $paragraph);

// Small devices
@media (min-width: 768px) {
    @include build('p', 'sm', $paragraph);
    }

// Medium devices
@media (min-width: 992px) {
    @include build('p', 'md', $paragraph);
    }

// Large devices
@media (min-width: 1200px) {
    @include build('p', 'lg', $paragraph);
    }

// Extra large devices
@media (min-width: 1460px) {
    @include build('p', 'xl', $paragraph);
    }

使用所有媒体查询断点和设备大小前缀（xs，sm，md等），如上所示，有一种方法可以嵌套这些媒体查询@mixin build或者这是否优雅，简洁，因为这个想法的代码可以得到？

更大的想法是，我想将所有这些用于另一个具有不同值集的列表。另一组类应该使用：@include build('h', $heading);

构建

Answer 1

我确实重构了之前的答案，解决方案看起来应该是这样的。我也改变了你的@mixin dimension。用它粘贴这个游戏。另外我建议通过Sass文档。很多想法来自它;）

@mixin dimension($list) {
    padding-top: nth($list, 1);
    padding-bottom: nth($list, 2);
    font-size: nth($list, 3);
    line-height: nth($list, 4);
}

$valueSet: (
    (5px, 5px, 15px, 20px),
    (7px, 8px, 20px, 30px),
    (8px, 7px, 25px, 35px)
);

@mixin build($string, $list){
    $i: 10;
    @each $a in $list {
        .p-#{$string}-#{$i} {
            @include dimension($a);
        }
        $i: $i + 5;
    }
}

@include build('xs', $valueSet);

@media (min-width: 768px) {
    @include build('sm', $valueSet);
}

@media (min-width: 992px) {
    @include build('md', $valueSet);
}

这应该为你构建它。我会指出这是一个较少的代码，但它需要一个注释，以明确下次访问CSS时会发生什么。

媒体查询是否可以嵌套在SCSS mixin中以构建使用列表的类似类？

1 个答案: