Question

我是SCSS的新人。我想动态覆盖变量。设置值的条件取决于draggable属性是否在div元素上。如果在div上设置了draggable属性，则变量将获得一个值。如果不是，则值必须为空。

<body>

<div class="notice" draggable="true">
    <h1>Text</h1>
        <p>More text</p>
</div>

/* global variable */
$draggable: url('') !default;

/* my "abstract" class */
body{
    &[draggable="true"]{
        $draggable: url('../icons/IDlink.png');
        /* here is $draggable: '../icons/IDlink.png' */
        @debug "$draggable in body is #{$draggable}"; 
    }
}

div{
    @extend body;
    &[class="notice"]{
        @debug "$draggableChain in safetyadvice is #{$draggableChain}";
        /* here is $draggable: empty */
        @include backgroundTest(url('../icons/notice_ISO.png'), url('../icons/notice_BG.png'), $draggable);
    }

我创建了一个带有空url-property的全局变量$ draggable。接下来我有一个＆＃34;抽象类＆＃34;身体。在这个＆＃34;班＆＃34;我想覆盖$ draggable变量。这似乎有效，因为调试得到了正确的价值。在div＆＃34; class＆＃34;从身体延伸的是$ draggable变量再次为空。为什么？我错了什么？有没有更好的方法来实现这一目标？

感谢您的帮助

动态更改变量SCSS

0 个答案: