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

问题描述

我写了这个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）

图 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; } }

图 2

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

图 3

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

图 4

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

动图 1

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

gif 2

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

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

标签： htmlcsssassscss-mixins

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

问题描述

解决方案

推荐阅读