SugarSS 抛出不必要的 CssSyntaxError

Question

我定义了一个 mixin 用于向元素添加样式。这可以完美编译，但是当我运行 stylelint 超过它时会抛出错误。我的stylelint配置如下：

{
    "plugins": [
      "stylelint-scss"
    ],
    "extends": "stylelint-config-sass-guidelines",
    "rules": {
      "block-opening-brace-space-before": "never",
      "color-hex-length": "long",
      "declaration-block-trailing-semicolon": "never",
      "indentation": 2,
      "max-nesting-depth": 2,
      "scss/dollar-variable-pattern": "[a-zA-Z0-9]+",
      "selector-combinator-space-after": "always",
      "selector-combinator-space-before": "always",
      "selector-list-comma-newline-after": "never-multi-line"
    }
  }

编辑

在没有 --custom-syntax sugarss 的情况下出现此错误。

Answer 1

CssSyntaxError 抛出是因为SugarSS syntax不支持插值，即#{element}.

您可以：

写入Sass
在 SugarSS 中编写并使用 Sass-like PostCSS plugins

不可能两者兼顾。

stylelint 开箱即用地支持 Sass、SCSS 和 SugarSS。您不需要使用 --custom-syntax 标志。

如果你想在 Sass 中继续写入，你应该从你的 stylelint 命令中删除 --custom-syntax sugarss 标志（并引用你的 glob），如下所示：

stylelint "**/*.{sass,scss}" --fix

如果你想在 SugarSS 中编写并使用 Sass-like PostCSS 插件，你应该：

将您的文件扩展名更改为 .sss
从您的 stylelint 命令中删除 --custom-syntax sugarss 标志（并引用您的 glob）：stylelint "**/*.sss" --fix
安装 postcss-mixins 插件
更改您的代码以匹配兼容的语法：

@define-mixin set-link-style $element
    $(element)
        text-decoration: none
        ..

@mixin set-link-style a

SugarSS 抛出不必要的 CssSyntaxError

SugarSS throwing unecessary `CssSyntaxError`

sass

stylelint