更新webstorm

时间:2015-04-28 03:29:13

标签: css webstorm emmet

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

我的问题是,如果我想在稍后阶段更新样式,有没有办法在一个地方更新并将其应用到其余部分?

希望这是有道理的。

感谢。

2 个答案:

答案 0 :(得分:0)

直接在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

的参考资料

答案 1 :(得分:0)

@Nico是对的 - 像Less和SASS这样的CSS预处理器对于这类东西来说非常棒 - 它们可以帮助你不必重复自己。

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

我很欣赏它并不像你在第一时间创建多个供应商前缀的线那样光滑。您可能会发现重新创建整个块更快。