Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/facebook/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Sass/Scss:在生成的CSS中更改:before和:hover的嵌套psuedo选择器的顺序?_Sass_Compass Sass - Fatal编程技术网

Sass/Scss:在生成的CSS中更改:before和:hover的嵌套psuedo选择器的顺序?

Sass/Scss:在生成的CSS中更改:before和:hover的嵌套psuedo选择器的顺序?,sass,compass-sass,Sass,Compass Sass,鉴于以下Sass: div.test { display: inline-block; background-color: #ffffff; color: #000000; &:before { & { &:hover { border: 1px solid salmon; } } width: 25px;

鉴于以下Sass:

div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    &:before {
        & { 
            &:hover {
                border: 1px solid salmon;
            }
        }
        width: 25px;
        height: 25px;
        content: "";
    }
}
div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    &:hover {
        &:before {
            border: 1px solid salmon;
        }
    }

    &:before {
        width: 25px;
        height: 25px;
        content: "";
    }
}
生成的CSS编译为:

div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
}

    div.test:before {
        width: 25px;
        height: 25px;
        content: "";
    }

        div.test:before:hover {
            border: 1px solid salmon;
        }
我试图做的是生成div.test:hover:before(当前输出是before:hover

注意:我可以使用以下SAS生成预期的CSS:

div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    &:before {
        & { 
            &:hover {
                border: 1px solid salmon;
            }
        }
        width: 25px;
        height: 25px;
        content: "";
    }
}
div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    &:hover {
        &:before {
            border: 1px solid salmon;
        }
    }

    &:before {
        width: 25px;
        height: 25px;
        content: "";
    }
}
但是,我想知道是否可以使用第一个嵌套方法或对其进行一些修改

我们的目标是,如果有这样一种使用Sass语法的方法,那么就不必重复&:before。我也同意这是不可能的。

而作为一个可以操纵的字符串,您可以在任何需要的地方插入值。不幸的是,您需要等待一段时间才能做到这一点。目前,&是不可变的,它的意思是“到目前为止的选择器链是什么”

编辑(2020.02.15):

现在,通过dart sass的最新版本在技术上可以实现这一点:

@use "sass:selector";

@mixin unify-parent($child) {
    @at-root #{selector.unify(&, $child)} {
        @content;
    }
}

div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;

    &:before {
        width: 25px;
        height: 25px;
        content: "";

        @include unify-parent(":hover") {
            border: 1px solid salmon;
        }
    }
}
资料来源:


为什么这很重要?两者都做同样的事情。因为我想更好地理解语法。不知道为什么这个问题被否决。在2020年,试图弄清楚这是否仍然是一个问题答案,上面修改过,现在这是可能的