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 中，但是当我打开浏览器并在调试器中查看时，我得到了相同的结果，但那些 "ems" 仍然没有按预期突出显示。（见图 3）

image 3

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

image 4

这里是一个使用 sass 编译的 CSS 文件的例子。（参见 gif 1）

gif 1

这里是一个具有相同断点和值的示例，只是从一开始就写在 CSS 中。（参见 gif 2）

gif 2

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

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

Answer 1

您的 SASS 代码中的某些数值和 "em" 之间有（流行方向格式）字符。 85.37376‬em 这样的值实际上在您的代码中是 85.37376‬‬em .

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

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

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

Units in Sass mixin are not working as intended

html

css

sass

scss-mixins