使用 sass --style 压缩后的某些样式未在浏览器中呈现 [英] Some styles not rendered in the browser with sass --style compressed
问题描述
我通过将单个 .css 文件重命名为 .scss 并将它们@import
合并到一个主文件中,重构了一些普通 CSS.该文件的内容如下所示:
I refactored some vanilla CSS by renaming individual .css files as .scss and @import
ing them into one master file. The contents of that file looks like this:
@import file1
@import file2
@import file3
在同一个目录下,_file1.scss
、_file2.scss
、_file3.scss
.
In the same directory, lives _file1.scss
, _file2.scss
, _file3.scss
.
一切正常,但由于某种原因,当我添加标志 --style 压缩
时,缩小的输出缺少类等.它也适用于 --style compact代码>所以无论出现什么问题都是特定于压缩的.
Everything works, but for some reason, when I add the flag --style compressed
the minified output is missing classes, etc. It also works fine with --style compact
so whatever is going wrong is specific to compressed.
我使用的是 OSX 10.9.2,使用 Sass v3.2.10 (Media Mark).我正在使用以下命令:
I'm on OSX 10.9.2, with Sass v3.2.10 (Media Mark). I'm using the following command:
sass --watch style.style.min.css --style compressed
当我不缩小输出(通过删除 --style 压缩
)时,生成的 CSS 工作正常.
When I do NOT minify the output (by removing --style compressed
) the resulting CSS works fine.
有什么想法可能出问题了吗?
Any ideas what could be going wrong?
具体代码:我无法发布整个文件,但这里有一个示例,其中包含无法正常工作的代码...
Specific code: I can't post the whole file but here's a sample with the code that's not working...
.scss
/*!XXXXXXXXXX*/
/* route colors */
.subway_metrorail_red { background:#e45340; color:#fff; }
.subway_metrorail_orange { background:#efaa49; color:#fff; }
.subway_metrorail_yellow { background:#7a7a17; color:#fff; }
.subway_metrorail_green { background:#52b05f; color:#fff; }
.subway_metrorail_blue { background:#3f8cda; color:#fff; }
(缩小).css
... .subway_metrorail_blue h3{color:#000}/*!XXXXXXXXXX*/.subway_metrorail_red{background:#e45340;color:#fff}.subway_metrorail_orange{background:#efaa49;color:#fff} ...
更新:我开始认为这与 sass 编译 CSS 无关...如果我采用与 --compact
完全相同的代码并添加一两个换行符,样式会得到正常应用.CSS文件或其他东西有最大行长吗?
UPDATE:
I'm starting to think this has nothing to do with sass compiling the CSS... If I take the exact same code that results from --compact
and add one line break or two, the styles get applied normally. Is there a maximum line length for CSS files or something?
更新 2:
验证器不喜欢这样:
.car2go_icon {
background-image:url("../images/car2go_logo_50.png");
background-size: 158px 50px;
background-position: 0px 20px;
background-repeat:no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../../../public/images/car2go_logo_50.png',
sizingMethod='crop')";
}
更新 3:我认为 -ms-filter:
之后字符串中的换行符是问题所在!当我离开上面的代码时,它们验证失败.但是当我删除换行符时,它们似乎通过了.我有一种感觉,这在放大过程中会破裂.有没有人比我更了解 -ms-filter 的正确语法?
UPDATE 3:
I think the line breaks within the string after -ms-filter:
are the problem! They fail validation when I leave the code as you see it above. But when I remove the line breaks they seem to pass. I have a feeling that this is breaking during magnification. Does anyone know more about the correct syntax for -ms-filter than me?
推荐答案
这可能不起作用,因为 css 行数超过 4000+.如果您尝试将一些 sass 放在另一个文件中并使每个文件少于 4000 行,我认为这对您有用.
This may not working because number of css lines exceeding 4000+. If you try to put some of your sass in another files and make each file under 4000 lines I think that will work for you.
这篇关于使用 sass --style 压缩后的某些样式未在浏览器中呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!