Sass mixin 中的单元未按预期工作

Question

我写了这个 mixin，但我真的不知道为什么它没有按预期工作。

@mixin responsive($breakpoint){

    @if $breakpoint == xs {
        @media only screen and (max-width:35.99875em ) { 
            @content 
        } 
    }

    @if $breakpoint == sm {
        @media only screen and (min-width:35.99876em) and (max-width:47.99875em) { 
            @content
        } 
    } 

    @if $breakpoint == md {
        @media only screen and (min-width:47.99876‬em) and (max-width:61.99875‬em) { 
            @content 
        } 
    } 

    @if $breakpoint == lg {
        @media only screen and (min-width:61.99876‬em) and (max-width:74.99875‬em) { 
            @content 
        } 
    } 

    @if $breakpoint == xl {
        @media only screen and (min-width:74.99876em) and (max-width:85.37375em) { 
            @content 
        } 
    }  

    @if $breakpoint == xxl {
        @media only screen and (min-width:85.37376‬em) { 
            @content 
        } 
    }  

}

这里一切看起来都很好，但是在 VSC 中，一些“ems”没有突出显示，那些没有突出显示的“ems”不能正常工作。 （见图1）

image 1

当我编译 sass 时，它没有显示任何错误，但即使在 CSS 代码中，“ems”仍然是灰色的。

下面的代码是 mixin 的示例用法。

body {

    @include responsive(xxl){
        background: rgb(147, 48, 228);
    }

    @include responsive(xl){
        background: rgb(44, 255, 150);
    }

    @include responsive(lg){
        background: rgb(255, 245, 100);
    }

    @include responsive(md){
        background: rgb(255, 146, 146);
    }

    @include responsive(sm){
        background: rgb(145, 145, 145);
    }

    @include responsive(xs){
        background: #000;
    }

}

以下代码是在 CSS 文件中编译的 sass。

@media only screen and (min-width: 85.37376‬em) {
  body {
    background: #9330e4; } }

@media only screen and (min-width: 74.99876em) and (max-width: 85.37375em) {
  body {
    background: #2cff96; } }

@media only screen and (min-width: 61.99876‬em) and (max-width: 74.99875‬em) {
  body {
    background: #fff564; } }

@media only screen and (min-width: 47.99876‬em) and (max-width: 61.99875‬em) {
  body {
    background: #ff9292; } }

@media only screen and (min-width: 35.99876em) and (max-width: 47.99875em) {
  body {
    background: #919191; } }

@media only screen and (max-width: 35.99875em) {
  body {
    background: #000; } }

image 2

起初我以为那些“em”突出显示只是在 VSC 中，但是当我打开浏览器并查看调试器时，我得到了相同的结果，但那些“em”仍然没有按预期突出显示。 （见图3）

image 3

现在，当我评论未突出显示的“ems”并在 CSS 文件中重写相同的内容时，它可以正常工作。 （见图4）

image 4

这是一个用 sass 编译的 CSS 文件的例子。 （见图 1）

gif 1

这是一个示例，它具有相同的断点和值，只是从一开始就用 CSS 编写。 （见图 2）

gif 2

查看发布的问题，似乎那些不起作用的“ems”也没有在堆栈溢出中突出显示。

我忘了提到重写相同的断点可以解决问题，但谁能解释一下为什么会发生这种情况？

Answer 1

您的 SASS 代码中有一些数值和“em”之间的（流行方向格式）字符。 85.37376‬em 之类的值实际上在您的代码中为 85.37376‬‬em 。

请检查 Chrome 开发工具中的生成 CSS。我附上了screenshot。

当您在每个内容规则之后添加分号时，VSCode 中的语法突出显示得到进一步纠正：@content;