Question

在SCSS文件中，我为灰色阴影分配了一个变量$ bgCol，我有六个id选择器，每个选择器的background-color属性都分配给$ bgCol的倍数。编译SCSS文件时，收到一条错误消息，指出算术运算操作（例如$ bgCol * 1.5）未定义。

相关的html是：

<div class="container">
    <div id="d1"></div>
    <div id="d2"></div> 
    <div id="d3"></div> 
    <div id="d4"></div> 
    <div id="d5"></div> 
    <div id="d6"></div> 
</div>

相关的sass代码为（产生错误的行，后跟注释）：

$bgCol: #111;

.container {
    display:flex;
    flex-wrap:wrap;
}

%abox {
    width: 100px;
    height: 100px;
    background-color: $bgCol;
    margin: 20px;
}

#d1 {
    @extend abox;
    background-color: $bgCol * 1.5; //this line produces the error on compilation; i imagine other id selectors with this multiplication computation would produce the same error
}

#d2 {
    @extend abox;
    background-color: $bgCol * 2.5;
}

#d3 {
    @extend abox;
    background-color: $bgCol * 3.5;
}

#d4 {
    @extend abox;
    background-color: $bgCol * 4.5;
}

#d5 {
    @extend abox;
    background-color: $bgCol * 5.5;
}

#d6 {
    @extend abox;
    background-color: $bgCol * 6.5;
}

期望的行为是使每个连续的内部div的灰度比以前的灰度更浅（即，带有id'd1'的div最暗，带有id'd2'的div稍浅，且ID为'd6'的div最轻）。如何解决在编译SCSS文件时出现的错误并获得所需的配色方案？

Answer 1

您不能简单地对SASS中的颜色进行算术运算。

怎么样

<script>
        $(document).ready(function(){

            var tag = {!! $tag !!} ;

            console.log(tag); //here I console the tag data, you can use tag data as per your requirement
            var content;
            var final="";

            tag.forEach(function (item, key) {
                //console.log(item);

                var str1= "[";
                var str2= "]";
                var str3= '{ "title": "';
                var str4= '"},';
                var str5= '"}';

                if (key==0) {
                    final = final + str1;
                }

                if (key+1!=tag.length) {
                    final= final+str3+item+str4;
                }
                else{
                    final= final+str3+item+str5+str2;
                }                

            });

            var obj = JSON.parse(final);

             console.log(obj);

            $('.ui.search')
            .search({
                source: obj
            })
            ;

        });

    </script>

这将扩展为6个选择器，从@for $i from 1 through 6 { #d#{$i} { @extend abox; background-color: scale-color($bgCol, $lightness: (($i + 0.5) * 10%)); } }到#d1每个#d6混合@extend混合，并随着ID的增加而具有更明亮的背景颜色。

请注意docs与abox和lighten之间的区别。

使用指定了背景色的选择器编译SCSS文件，将其分配给变量的算术运算结果会产生错误

1 个答案: