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

Question

使用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属性，这些属性在上面的场景中使用变量。在这种情况下使用变量有什么好处吗？

Answer 1

它非常不鼓励使用与值相同的变量名。使用变量的目的是，如果需要进行更改，那么修改是最小的。例如，您已经声明了一个变量@Container:100 it，并且在10个文件中使用它。因此，如果您想将其值更改为200 if，那么只需简单地更改值即可。

正如您所建议的那样，使用变量名称有两个缺点：

1. 如果您想要将变量@ say 10值更改为15 (例如@利润率-10: 15 )，那么它看起来会很奇怪。
2. 如果您为每个值声明变量，那么将其声明为变量是没有好处的，因为您必须在几个地方修改它(这不符合变量的目的)。

现在转到变量名@PullRight或@PullLeft。同样，使用这些名称没有好处，因为值(左、右、上、下)是有限的，而不是变量。因此，我建议您不要创建变量，而是使用它本身的值。

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

Answer 2

我想我们家里可能有个锤子，里面有这些变量。让它们如此明确地命名是有问题的，因为它并不真正适用于布局的语义概念，而且如果您要更改其中的一些，那么很快就会出现完全的混乱。想象一下：

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

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

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

更正确的可能是一些语义更丰富的东西，比如：

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

这些至少说明了你的网站将如何设计，如果价值改变，它将不会导致立即维护火车残骸。

Answer 3

这与在任何语言中使用变量是一样的。只要你愿意，你就可以随时改变它们。

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

另一个例子。让我们假设CSS中有以下代码：

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

现在决定将#page宽度更改为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;

您预期Margin-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;

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