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

我认为我们可能会在房子里有这些变量的锤子。将它们命名为如此具体是有问题的，因为它并不真正适用于布局的语义概念，因为如果你要改变它们中的一些，那么很快就会发生混乱。试想一下：

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

即使作为一个例子，我也无法输入。我感觉像是哭泣游戏中的淋浴场景。

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

更正确的可能是更具语义风格的东西，例如：

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

至少说明您的网站将如何设置风格，如果价值发生变化，则不会立即导致维护火车残骸。

Answer 2

非常不鼓励使用与value相同的变量名称。使用变量的目的是，如果需要进行更改，则修改最小。例如，你声明了一个变量@容器宽度：100px，你在10个文件中使用它。因此，如果您想将其值更改为200px，那么您只需更改值即可。

建议使用变量名称有两个缺点：

如果你想将变量@Margin-10值更改为15，例如@ Margin-10：15，它会看起来很奇怪。
如果要为每个值声明变量，则将其声明为变量没有任何好处，因为您必须在多个位置修改它（这不符合变量的目的）

现在来到变量名@PullRight或@PullLeft。再次使用这些名称没有任何好处，因为值（左，右，上，下）是有限的而不是可变的。因此，我建议您不要创建变量，但要使用原样。

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

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;

所以没有问题，您可以更改这三行中的值或进行少量修改。

然而，在问题的例子中，我认为它没有按照预期进行。如果你定义：

@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;

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

使用LESS变量有什么好处

3 个答案: