Question

我正在建立一个Saleor网站，而且我对Django和SASS相对较新。

我目前正在我的SCSS文件中制作自己的样式规则，其中有一些重复的代码，我觉得可能有一种方法可以减少重复代码的数量。找不到关于SCSS的任何风格指南。

我可以就更好的方法来获得这些代码吗？

.p {
    &-around {
        &_none {
            padding: $none;
        }
        &_x-small {
            padding: $x-small;
        }
        &_small {
            padding: $small;
        }
        &_medium {
            padding: $medium;
        }
        &_large {
            padding: $large;
        }
        &_x-large {
            padding: $x-large;
        }
    }
    &-top {
        /* only real difference is just "padding-top" instead of "padding" */
        &_none { 
            padding-top: $none;
        }
        &_x-small {
            padding-top: $x-small;
        }
        &_small {
            padding-top: $small;
        }
        &_medium {
            padding-top: $medium;
        }
        &_large {
            padding-top: $large;
        }
        &_x-large {
            padding-top: $x-large;
        }
    }
    /* There's more with right, bottom, vertical, horizontal padding as well */
}

欢迎所有输入。

编辑：这是生成的代码，非常感谢Jakob让这个更清洁。

@each $size, $value in (
    'none'   : $none,
    'x-small': $x-small,
    'small'  : $small,
    'medium' : $medium,
    'large'  : $large,   
    'x-large': $x-large        
){
    .p {
        &-around_#{$size}     { padding:        $value; }
        &-vertical_#{$size}   { padding-top:    $value; padding-bottom: $value; }
        &-horizontal_#{$size} { padding-left:   $value; padding-right:  $value; }
        &-top_#{$size}        { padding-top:    $value; }
        &-bottom_#{$size}     { padding-bottom: $value; }
        &-right_#{$size}      { padding-right:  $value; }
        &-left_#{$size}       { padding-left:   $value; }
    }
    .m {
        &-around_#{$size}     { margin:        $value; }
        &-vertical_#{$size}   { margin-top:    $value; margin-bottom: $value; }
        &-horizontal_#{$size} { margin-left:   $value; margin-right:  $value; }
        &-top_#{$size}        { margin-top:    $value; }
        &-bottom_#{$size}     { margin-bottom: $value; }
        &-right_#{$size}      { margin-right:  $value; }
        &-left_#{$size}       { margin-left:   $value; }
    }
}

Answer 1

我想我会使用@each，#{}循环和插值$padding: ( 'none' : none, 'x-small': 1px, 'small' : 2px, 'medium' : 3px, 'large' : 4px, 'x-large': 5px ); .p { @each $size, $value in $padding { &-around_#{$size} { padding: $value; } &-top_#{$size} { padding-top: $value; } &-right_#{$size} { padding-right: $value; } &-bottom_#{$size} { padding-bottom: $value; } &-left_#{$size} { padding-left: $value; } } } - 就像：

.p {
    @each $size, $value in (
        'none'   : $none,
        'x-small': $x-small,
        'small'  : $small,
        'medium' : $medium,
        'large'  : $large,   
        'x-large': $x-large        
    ){
        &-around_#{$size} { padding:        $value; }  
        &-top_#{$size}    { padding-top:    $value; }       
        &-right_#{$size}  { padding-right:  $value; }       
        &-bottom_#{$size} { padding-bottom: $value; }               
        &-left_#{$size}   { padding-left:   $value; }               
    }
}

如果你想保留你可以做的变量：

    set str1=laptop1 ; //set string for removed section 

    awk -v RS="config host" -v a=$str '($0!~a)&&(NR>1) {printf "%s", RS $0 }' file

Answer 2

我想这是最好的方法。

.p {
    &-around, &-top {
        &_none {
            padding: $none;
        }
        &_x-small {
            padding: $x-small;
        }
        &_small {
            padding: $small;
        }
        &_medium {
            padding: $medium;
        }
        &_large {
            padding: $large;
        }
        &_x-large {
            padding: $x-large;
        }
    }
}

是否有更简洁的方法来编写此SCSS代码？

2 个答案: