Sass 初级教程首先定义好的变量名

Question

Sass 中的定义变量是非常的强大的，你可以在一个地方定义好变量，在项目的多个地方使用这个定义的变量。它允许你在集中的一个地方做变化，而不需要在项目和多个文件中使用查找替换的方式来做修改。

但是选择一个好的变量名是一件比较困能的事情。

如果你不小心，在项目中变量很容易失控。最常见的就是你会忘记了在项目中定义了什么变量名，因为你很难记住你定义的所有变量名，这样有可能会给你在项目开发中带来不必要的挫折。

然而，通过下面的一些定义变量的原则，可以帮助你更好的控制你的变量，也让你在整个项目中变得更为理智。

使用语义化的变量名

想像一下，你客户品牌是红色，你可能定义了一个变量$red。半年过去之后，你的客户决定将品牌的颜色由红色变成蓝色。

改变变量$red的值是一件非常简单的事情，但变量$red也就失去了他自身说明意义，也就没了什么用途说明。

相反，定义的变量名，可以描述其名称、功能描述或目的，这样会更好些。换句话说，定义一个具有语义化的变量名。

// 不好的命名方式
$red: red;
$yellow: yellow;

// 更好的命名方式
$brand-color: red;
$accent-color: yellow;

采纳有用的约定

最重要的是拿出一些好的命名变量的约定，让自己能更好的记住这些变量名。

例如，你可能会使用名称加-color的后缀来命名颜色的变量：

// Base colors
$base-color: #333;
$brand-color: red;
$brand-80-color: rgba($color-brand, 0.8);
$accent-color: yellow;

或者你会使用header-或者footer-来命名一些特殊的区域：

// Header
$header-height: 100px;
$header-background-color: $color-brand;

// Footer
$footer-height: 200px;
$footer-background-color: #aaa;

配置集中放置在一起

我喜欢使用一个单独的文件来定义所有的变量，我把这个定义所有变量的文件名命名为_config.scss,这样我只需要在我的主样式表中通过@import命名来引用。这种方式的好处是，只要列入到这个文件中的变量，在其他地方的任何文件都可以获取这里面定义的变量。

@import base/config;
@import base/typography;
@import base/utilities;

@import modules/button;

总结

大概会有很多有关于Sass如何命名变量的建议，但哪一种才是适合你或你的团队的工作方式呢？这就是你需要关注的地方。选择好的命名变量的方式，这将能更好的帮助你维护和开发你的项目样式表。