【问题标题】:Some styles not rendered in the browser with sass --style compressed使用 sass --style 压缩后,某些样式未在浏览器中呈现
【发布时间】:2014-06-30 04:36:08
【问题描述】:

我通过将单个 .css 文件重命名为 .scss 和 @importing 将它们合并到一个主文件中重构了一些原始 CSS。该文件的内容如下所示:

@import file1
@import file2
@import file3

在同一目录中,居住着_file1.scss_file2.scss_file3.scss

一切正常,但由于某种原因,当我添加标志 --style compressed 时,缩小的输出缺少类等。它也适用于 --style compact,因此出现问题的任何问题都特定于压缩。

我使用的是 OSX 10.9.2,带有 Sass v3.2.10(媒体标记)。我正在使用以下命令:

sass --watch style.style.min.css --style compressed

当我不缩小输出(通过删除 --style compressed)时,生成的 CSS 工作正常。

有什么想法可能会出错吗?

具体代码: 我无法发布整个文件,但这里有一个示例,其中的代码不起作用...

.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文件或其他东西有最大行长吗?

更新 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 的正确语法?

【问题讨论】:

  • 请提供足够的示例 .sass 代码,以便我们看到问题; .sass 缺少哪些类?
  • @KatieK 我添加了一个在缩小时不起作用的代码示例。
  • 编辑后,我仍然不确定缺少什么。是从 subway_metrorail_yellowsubway_metrorail_blue 的全部定义吗?
  • @halfer 抱歉让我澄清一下。没有样式会“丢失”。相反,浏览器只是停止识别它们。我可以在源代码中找到它们,但是当我使用开发人员工具时,它们并没有被应用。
  • 我已经澄清了标题,但您可能希望更改“缩小的输出缺少类” - 我看不出这意味着生成的 CSS 输出中除了缺少什么之外的任何东西。

标签: css sass


【解决方案1】:

这可能不起作用,因为 css 行数超过 4000+。如果您尝试将一些 sass 放在另一个文件中并使每个文件低于 4000 行,我认为这对您有用。

【讨论】:

  • 这只有在我们谈论 IE 时才是正确的。
猜你喜欢
  • 1970-01-01
  • 2021-09-02
  • 2018-01-12
  • 1970-01-01
  • 2017-06-01
  • 1970-01-01
  • 2013-12-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多