Question

我无法使用cssutils.parseString解析包含媒体查询的CSS字符串。

在readme for cssutils中，它明确指出支持媒体查询。

如何使用cssutils执行此操作？

>>> from cssutils import parseString
>>> css = '.font-size-24-r { font-size: 24px;\n\n@media only screen and (max-width: 720px) {\n\tfont-size: 21.3px;\n}'
>>> ps = parseString(css)
ERROR   CSSStyleDeclaration: Unexpected token, ignoring upto '@media only screen and (max-width: 720px) {\n\tfont-size: 21.3px;\n}'. [3:1: @media]

Answer 1

问题不在于我使用cssutils的方式。相反，问题是我使用了无效的CSS。

来自cssutils的错误消息有点令人满意，尽管它通常表明问题出在媒体查询附近的CSS中。它没有说明为什么只是Unexpected token。原因是@media查询不能嵌套在选择器块中。

无效的CSS - 由于.font-size-48-s内嵌入媒体查询。

.font-size-48-s {
    font-size: 3em;

    @media only screen and (max-width: 45em) {
        font-size: 2.6667em
    }
    @media only screen and (max-width: 30em) {
        font-size: 2.4em
    }
}

有效的CSS - cssutils.parseString现在会产生预期的结果。

.font-size-48-s { font-size: 3em }

@media only screen and (max-width: 45em) {
    .font-size-48-s { font-size: 2.6667em }
}

@media only screen and (max-width: 30em) {
    .font-size-48-s { font-size: 2.4em }
}

cssutils parseString因媒体查询失败。 - 错误CSSStyleDeclaration：意外的令牌

1 个答案: