Scss可变的好处？

Question

嗨，我是第一次做scss并有一些疑问。

考虑我创建一个变量$multipler : 10px;并将其用于我必须在px中给出值的所有属性。

然后，如果我希望字体大小为20px，我将使用

.foo { font-size : $multiplier * 2 } // 20px

所以我的问题是使用

的区别

.foo { font-size : $multiplier * 2 } // 20px

OR

.foo { font-size : 20px } // 20px

两者都给出20px，哪一个更好？

Answer 1

.foo { font-size : 20px } // 20px

就是这么简单，它是什么。如果您在代码中的多个位置使用20px，则必须手动更改它，如果您希望更改该值。

如果您使用变量，例如：

$multiplier: 10px;

然后，您可以在代码中的一个位置更改该值。例如，如果你有这样的代码：

$multiplier: 10px;
body { padding:$multiplier } /* 10px */
#header { padding:$multiplier } /* 10px */
#content { padding:($multiplier * 2) } /* 10px x 2 = 20px */
#sidebar { padding:$multiplier } /* 10px */

然后你可以只更改一次$multiplier值，它会随处变化。乘以2也会相应地改变：

$multiplier: 20px;
body { padding:$multiplier } /* 20px */
#header { padding:$multiplier } /* 20px */
#content { padding:($multiplier * 2) } /* 20px x 2 = 40px */
#sidebar { padding:$multiplier } /* 20px */

如果你使用这样的东西：

.foo { font-size : 20px } // 20px

然后你必须手动更改值（或搜索并替换它）。这样做是没有错的，但如果你使用的是LESS / SCSS，那么你自己就是在不使用变量。如果仔细使用，它们会非常强大。请记住，改变后你的整个网站也会改变，所以要小心你如何使用它们（你最终可能会改变那些不应该改变的东西）。

Answer 2

结果（渲染页面）都是相同的。

使用variable更好/更容易修改文档中的所有大小（当需要chane font-size时，您将通过整个CSS文件进行1次更改而不是X更改。）

Answer 3

具有可重用的值/删除重复的代码，Sverri提到的是关键;但问题是：

Scss变量的好处？

其他一些好处：

• 它们允许您为style guide colors，指标等创建描述性命名约定。
• 插值

• Interpolation + iteration