Less 使用较少的变量有什么好处

使用较少的变量来更改属性（如：

@Margin-10: 10px;
@Margin-12: 12px;
@Margin-19: 19px;
@Margin-110: 110px;
@Margin-189: 189px;
@Margin-115: 115px;
@Margin-150: 150px;
.................and so on.

创造那些在未来不会改变的变量

@PullLeft: left;
@PullRight: right;

---

我正在重新分解我的应用程序中的LESS，它有太多的CSS属性，这些属性在上述场景中使用变量。在这种情况下使用变量有什么好处吗？

我想我们可能会有一把锤子砸在那些变量上。将它们命名得如此明确是有问题的，因为它实际上不适用于布局的语义概念，而且如果您要更改其中一些，很快就会出现完全混乱的情况。想象一下：

@margin-189: 27px;
@margin-115: 46px;

即使是作为一个例子，我也很难打出来。我感觉有点像哭游戏中的淋浴场景

不，这些变量是一个例子，当你唯一的工具是锤子时，你看到的只是钉子

更正确的可能是语义上更有味道的东西，比如：

@container-margin-left: 36px;
@panel-margin-left: 20px;

---

这些至少说明了您的站点将如何设置样式，如果值发生更改，则不会立即导致维护事故。

这与在任何语言中使用变量是一样的。您可以随时更改它们

现在你可以思考——它们永远不会改变，但将来你可能想做一些改变。您甚至可以将一些CSS移动到另一个项目中，在那里您决定进行一些更改。使用变量，您将在一分钟内完成此操作

另一个例子。假设您在CSS中有以下代码：

#page {
  width: 800px;
}
#content {
 width: 600px;
}
#sidebar {
  width: 200px;
}

现在您决定将页面宽度更改为780px

所以你改变它：

#page {
  width: 780px;
}
#content {
 width: 600px;
}
#sidebar {
  width: 200px;
}

现在您遇到了一个问题-您需要查看整个文件，真正的文件中有什么错误，这不会像上面的示例那样容易

使用变量可以：

@page-width: 800px
@content-width: 600px;
@sidebar-width: @page-width - @content-width;

因此，您可以毫无问题地更改值或对这3行进行小的修改

然而，在问题的例子中，我认为它并没有得到应有的效果。如果您定义：

@Margin-10: 10px;
@Margin-12: 12px;
@Margin-19: 19px;

您预计保证金-10是10单位保证金，但您可以决定更改11的值，您可以：

@Margin-10: 11px;
@Margin-12: 15px;
@Margin-19: 24px;

这将使您完全混乱，因为事实上，即使您查看此文件，您现在也不知道什么是Margin-10变量及其用途。它甚至有其他的价值，而不是它的名字所暗示的，所以你们不知道会发生什么，你们需要再次查看整个CSS源代码

所以变量是有用的，但它们的名称应该便于记忆，并且知道它们的用途。永远不要将变量名和变量值连接起来，因为值可能会改变，而您将得到无用的名称

但是，在上面的示例中，也可能有人定义这些边距，甚至不改变其值，而是改变其单位，例如使用em：

@Margin-10: 10em;
@Margin-12: 12em;
@Margin-19: 19em;

---

但是，我仍然认为这不是最好的解决方案，因为它限制了重复使用此文件

非常不鼓励使用与值相同的变量名。使用变量的目的是，如果需要更改，那么修改是最小的。e、 g您已经声明了一个变量@Container width:100px，并在10个文件中使用它。所以，如果你想把它的值改成200px，那么你只需要简单地改变它的值

按照您的建议使用变量名称有两个缺点：

如果您想将变量@Margin-10的值改为15，例如@Margin-10:15，这看起来很奇怪。 如果您为每个值声明变量，那么将其声明为变量没有任何好处，因为您必须在多个地方修改它，这不符合变量的用途 现在来看变量名@PullRight或@PullLeft。同样，使用这样的名称也没有好处，因为left、right、top和bottom的值是有限的，而不是可变的。所以我建议您不要创建变量，而是按原样使用值

---

根据变量的功能创建变量名。使用名词和动词。

对于第一组，我同意达伦的答案。它看起来很结实。对于第二组，看不出需要变量。如果您知道不同选择器中的多个属性需要相同的值，并且希望有一个公共位置来维护它们，那么在将来对其进行任何修改都会变得更容易，那么最好使用变量。最后，我也认为这个问题可能会吸引基于意见的答案。我同意，可能会有很多基于意见的东西在这个问题上飞来飞去！不过，我想补充的一点是，第二组与第一组相同。在这两种情况下，定义的细节都渗透到变量的名称中，这两种设置都不可取，原因相同：