Libsass: 类型选择器应始终在伪类之前打印

创建于 2018-06-30 · 3评论 · 资料来源: sass/libsass

从[type]选择器扩展占位符时，如果占位符使用伪类，则选择器将以错误的顺序打印。

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

[type="button"] {
  <strong i="8">@extend</strong> %button-styles;
}

实际结果

libsass 3.5.4

[type="button"] {
  color: red;
}

:focus[type="button"] {
  color: blue;
}

预期结果

红宝石萨斯3.5.6

[type="button"] {
  color: red;
}

[type="button"]:focus {
  color: blue;
}

版本信息：

$ node-sass --version
node-sass   4.9.0   (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

我还使用selector-unify运行了几个调试语句，并注意到如果我使用了元素选择器，无论选择的顺序如何，它都会按预期进行统一，但是类型选择器却没有。

@debug(selector-unify('button', ':focus'));
// button:focus

@debug(selector-unify(':focus', 'button'));
// button:focus

@debug(selector-unify('[type="button"]', ':focus'));
// [type="button"]:focus

@debug(selector-unify(':focus', '[type="button"]'));
// :focus[type="button"]

让我知道是否可以提供更多信息！

Bug - @extends Bug - Confirmed Dev - Test Written

资料来源

ashleykolodziej

👍6

最有用的评论

这是一个非常重要的错误，将libsass升级到较新版本时才发现自己（较早版本没有此错误）。这可能会破坏站点，而不会引起您的注意。这确实应该尽快解决。您可以在此处快速检查不同的库：
https://www.sassmeister.com/

好的，昨天我有个脑力激荡的人，下面的例子实际上不是错误（或者至少在这种情况下顺序无关紧要）。
但是原始错误仍然存在。

~~我还进行了一些测试，并且有更多的方法可以扩展其中的类，并以错误的顺序打印：~~
Libsass：


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

输出：


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

~~如您所见... hoverclass被列为头等舱。~~
~~实际上，我发现我的示例也是普通sass库中的错误。~~

bskibinski 于 2018-10-04

👍3

所有3条评论

好的，昨天我有个脑力激荡的人，下面的例子实际上不是错误（或者至少在这种情况下顺序无关紧要）。
但是原始错误仍然存在。

~~我还进行了一些测试，并且有更多的方法可以扩展其中的类，并以错误的顺序打印：~~
Libsass：


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

输出：


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

~~如您所见... hoverclass被列为头等舱。~~
~~实际上，我发现我的示例也是普通sass库中的错误。~~

bskibinski 于 2018-10-04

👍3

@bskibinski我不骗你，这实际上是我今天的生日，你不知道看到有人最终回复我是多么兴奋，即使只是说我并不孤单！有史以来最好的意外生日礼物。 🎂🎉

ashleykolodziej 于 2018-10-05

@ashleykolodziej哈哈快乐的蛋糕日！很高兴我可以做得更好;）

另外，我发现的第二个错误实际上不是错误（漫长的一天），但您的错误仍然是！
希望很快能解决这个问题！ :)

bskibinski 于 2018-10-05

此页面是否有帮助？

0 / 5 - 0 等级