Question

我想从较少调整到sass。

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

/* 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中还有其他办法可以做出反复的设计突破，但是其他方式并没有像在这个例子中那样使用两个breakponit：

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

我搜索一起使用多个breakponits的解决方案，而不添加新的断点。

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)的平板电脑视口通过更改平板电脑来覆盖桌面样式，最后移动到覆盖桌面和平板电脑大小的移动视口，这样您就需要更少的代码，因为某些属性已经来自桌面样式，您只需覆盖需要更改的内容

响应断点从LESS到SASS

1 个答案: