Question

我有两种类型的圈子，一种在.poi.licensed内，另一种在.poi.unlicensed内。我正在努力使.circle内的.poi.unlicensed有一个$tangerine边框而不是$turqoise。在这种情况下，我怎样才能使用尾随的amerpsand。请记住，我排除了很多其他不相关的scss，所以它必须保持这种一般结构。

我正在尝试以下方面的内容，但它会编译为.unlicensed #licensed-v-unlicensed .poi .circle {}

$turqoise: #40e8e3;
$tangerine: #ffa975;
#licensed-v-unlicensed {
    .poi {
        .circle {
            border: 5px solid transparentize($turqoise, 0.1);
            .unlicensed & {
                border: 5px solid transparentize($tangerine, 0.1);
            }
            @include breakpoint(medium up) {
                border-width: 10px;
            }
            border-radius: 50%;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
            width: 100%;
            height: 100%;
            position: relative;
            cursor: pointer;
        }
    }
}

Answer 1

我最终使用了我在blog上找到的技巧，即使用@at-root从根开始并定位.unlicensed类。这比我希望做的工作多得多，但迄今为止发现的唯一解决方案。

$turqoise: #40e8e3;
$tangerine: #ffa975;
#licensed-v-unlicensed {
    .poi {
        .circle {
            border: 5px solid transparentize($turqoise, 0.1);
            @at-root #licensed-v-unlicensed .poi.unlicensed .circle {
                border: 5px solid transparentize($tangerine, 0.1);
            }
            @include breakpoint(medium up) {
                border-width: 10px;
            }
            border-radius: 50%;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
            width: 100%;
            height: 100%;
            position: relative;
            cursor: pointer;
        }
    }
}

使用scss / sass尾随＆符号将目标锁定在一个级别

1 个答案: