sass 的函数和遍历用法

$number: (
    5: 5px,
    10: 10px,
    15: 15px,
    20: 20px,
    30: 30px,
    40: 40px,
    50: 50px
);

@mixin padding($key, $value) {
    .p-#{$key} {
        padding: $value;
    }
    .pl-#{$key} {
        padding-left: $value;
    }
    .pr-#{$key} {
        padding-right: $value;
    }
    .pt-#{$key} {
        padding-top: $value;
    }
    .pb-#{$key} {
        padding-bottom: $value;
    }
}

@each $key, $value in $number {
    @include padding($key, $value);
}

 

posted @ 2021-07-29 17:06  放飞的回忆  阅读(119)  评论(0编辑  收藏  举报