Css 响应断点从较少变为SAS

我真的很想从少到多

我在较少的变量中定义了响应断点：

/* Breakpoints */
@break1:~"(max-width: 570px)";
@break2:~"(min-width: 571px) and (max-width: 1002px)";
@break3:~"(min-width: 1003px)";

以及以这种方式使用它们的组件：

    /*component*/
    .main-header{
        /*base styles - all devices*/

        /*responsive breakpoints for component*/
        @media @break1{
            /*mobile only (from 0px up top 570px)*/
        }

        @media @break2{ 
                /*tablet only (from 571px up top 1002px)*/
        }
        @media @break3{
            /*desktop only (from 1003px up infinite)*/
        }
        @media @break2, @break3{
            /*tablet & desktop (from 571px up infinite)*/
        }
    }

我看到在SASS中还有其他方法可以实现Responsive design break-ponits，但没有一种方法可以实现将两个breakponits一起使用，如下面的示例中所示：

        @media @break2, @break3{
            /*tablet & desktop (from 571px up infinite)*/
        }

我搜索的解决方案是同时使用多个breakponits，而不添加新的断点

---

将逗号替换为和-

@media$break2和$break3{}

此外，您不能将字符串存储在变量中，您需要创建mixin或将代码更新为如下内容

/* Breakpoints */
$break1: 570px;
$break2: 571px;
$break3: 1003px;

/*CODE EXAMPLE - for component header  + include responsive*/

        .main-header{
            /*base styles - all devices*/
            height:20px;            

            /*responsive breakpoints for component*/
          @media only screen and (max-width : $break2) and (min-width: $break3) {

            }
        }

这将为您提供

@介质（最小宽度：571px）和（最大宽度：1002px）以及（最小宽度：1003px）

更合适的解决方案是漂亮的css结构：不要像示例中那样使用断点，而是覆盖它们，开始为所有视口（通常为桌面）设置样式，然后使用

@media（最大宽度：1024px）

移动到平板电脑视口，并使用平板电脑的更改覆盖桌面样式，最后移动到覆盖桌面和平板电脑大小的移动视口，这样您就不需要太多的代码，因为有些属性已经来自桌面样式，您只需覆盖需要更改的属性

它不起作用-