从LESS到SASS的响应断点[重复]

Question

我正在努力从少调整到低调。

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

/* 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 中还有其他方法可以进行响应式设计中断点，但是这两种方法都不能像在这个例子中那样使用两个中断点：

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

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

VIEW DEMO

Answer 1

用and-@media $break2 and $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) {

            }
        }

这会给你@media (min-width: 571px) and (max-width: 1002px) and (min-width: 1003px)

更合适的解决方案是漂亮的 css 结构：不要像示例中那样使用断点，而是覆盖它们，开始为所有视口设置样式（通常用于桌面），然后使用 @media (max-width : 1024px) 移动到平板电脑视口并使用覆盖桌面样式平板电脑的更改，最后转移到覆盖桌面和平板电脑尺寸的移动视口，这样您需要更少的代码，因为某些属性已经来自桌面样式，您只需要覆盖您需要更改的那些