Question

有没有办法使用媒体查询和一些断点将SCSS编译到CSS而没有媒体查询只会包含我传递给SCSS编译器的特定屏幕大小的样式？

示例SCSS文件：

body {background:red}

@medai query only screen and (max-width: 767px){        
    a {
        margin: 10px
    }       
}

@medai query only screen and (max-width: 1280px){       
    a {
        color: orange;
    }       
}

我想用媒体查询编译上面的SCSS并获取一个没有媒体查询的CSS文件，如果浏览器窗口宽度为1600px或320px，浏览器将应用所有适当的样式;

预期的CSS为1600px;

body {background:red}
a {margin: 10px}
a {color: orange;}

预期的CSS为320px;

body {background:red}
a {margin: 10px}

我需要它来编译IE7的css，它不支持媒体查询。

Answer 1

我认为这不可行，但你可以做的是：

创建3个scss文件：_global.scss，1600px.scss，320px.scss

（注意“_”前面加上_global.scss文件，这样编译器就不会把它编译成css文件）

然后在1600px.scss＆amp;你可以做320px.sccs @import "global";

然后在你的html头部内：

<link rel="stylesheet" media="(max-width: 767px)" href="320px.css" />
<link rel="stylesheet" media="(max-width: 1280px)" href="1600px.css" />

您可以在http://sass-lang.com/guide

找到有关导入的更多信息

如何在没有媒体查询的情况下将具有多个捕捉点的SASS编译为特定于屏幕尺寸的CSS

1 个答案: