在 webstorm 中更新多个供应商前缀样式答案

【问题标题】：Update multiple vendor prefix styles in webstorm在 webstorm 中更新多个供应商前缀样式
【发布时间】：2015-04-28 03:29:12
【问题描述】：

在 Webstorm 10 中，您可以使用内置的 emmet 插入所有供应商前缀样式。例如，您输入 -border-radius 后跟 TAB 键，它会自动为您创建供应商特定的样式。然后你可以输入例如。 10px 并将样式应用于所有供应商前缀。

我的问题是，如果我想在以后更新样式，有没有办法在一个地方更新并将其应用于其余地方？

希望这是有道理的。

谢谢。

【问题讨论】：

【解决方案1】：

@Nico 是对的——像 Less 和 SASS 这样的 CSS 预处理器非常适合这种类型的事情——它们可以帮助你不必重复自己。

如果您坚持使用 CSS，WebStorm 有 多行编辑，因此一种方法是按住 Alt 键并在之前单击每个10px 值。您将在您单击的每个点处生成一个新光标，然后您可以用您的新值改写，它会更改所有这些值。

我很欣赏这不像一开始就创建多个以供应商为前缀的行时那么巧妙。您可能会发现重新创建整个块更快。

【讨论】：

谢谢。虽然我完全同意你和@Nico，但我一直在寻找多行编辑。我仍然习惯于使用 Webstorm。当我使用 sublime text 时，多行编辑非常有用。 :)

【解决方案2】：

直接在 CSS 中没有快速的方法。但是（并非特定于 webstorm，因为我从未尝试过）您可以使用 LESS http://lesscss.org/features/。

基本上，LESS 是 CSS 的预处理器，您可以在 LESS 文件中定义变量（例如 -border-radius 属性），然后在处理 LESS 文件时，将变量替换为定义。比如

@border-radius: 10px;

.my-class{
   border-radius: @border-radius;
}

结果为

.my-class{
    border-radius: 10px;
}

还有许多其他很棒的功能，但在您的具体情况下，您甚至可能想要使用Parametric Mixin。这些允许您使用变量定义自定义样式。示例几乎正是您要查找的内容，例如（取自参考）。

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

并称为：

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

现在您可以使用 LESS 多种不同的方式，并动态地将文件预处理为 css 或将它们作为部署的一部分进行处理。

这是为WebStorm找到的参考

【讨论】：