sass命名变量_快速提示：模块化命名SASS变量

sass命名变量

当使用Sass，Less（或其他任何编程语言）之类CSS预处理程序时，您将利用变量的功能。 但是，如果您在编码时自发创建变量名，则很可能是您的命名约定缺乏内聚性。 您应该考虑模块化地组织变量名（以及与此相关的项目）。 这将为您的整个项目带来结构和统一性，使您更容易理解和浏览整个项目。

---

命名建议

假设您在项目中需要一个用于文本颜色的变量。 您可以将其称为$text-color ，还是应将其称为$color-text ？ 您如何决定？ 随着项目中变量数量的增加，随机选择一个可能会导致缺乏结构。 如经验所示，我们经常会忘记确切地为特定项目命名变量的方式。 这导致全局搜索和替换变量名的方法混乱而费时。

我们需要的是定义和选择变量名的规则。 在项目中保持模块化的一种好方法是将共享关系和共同性的变量分组。 然后，您可以通过从左到右排列从通用到特定的描述它们功能的词来命名它们（与CSS具有特定性的工作方式大致相同）。

例如，如果我有四个用于四种不同边框颜色的变量，则可以将它们全部命名为“ border”（因为这是它们共同使用的通用术语），并通过从左至右的阅读变得更加具体。 以这种方式对变量进行分组和命名使您的代码更易于阅读，理解和调用。

---

泛型到特定：一个示例

假设我们正在SASS中工作，并且想创建一些变量来定义项目的调色板。 如果我们使用的是蓝色阴影，则可能会创建一些像这样的变量：

$blue;
$dark-blue;
$medium-blue;
$darkest-blue;
$light-blue;
$lightest-blue;

命名这些变量的更好方法是从它们共同使用的通用词开始：蓝色。 然后我们可以从左到右获得更具体的信息：

$blue;
$blue-dark;
$blue-darkest;
$blue-light;
$blue-lightest;

这不仅有助于记忆，而且允许文本编辑器（例如Sublime Text ， Coda等）轻松建议颜色。 这样，您不必完全记住变量的命名方式。 相反，您可以以一般方式开始，并随着文本编辑器自动建议变量名称而变得更加具体。 您只需要记住的是您想要一种蓝色。 因此，您开始输入$blue ，您将获得创建的所有不同蓝色的列表！

---

提示示例

想象一下，我正在一个大型项目中，我已经将所有包含颜色值的变量分组了，并在它们之前加上了它们共同的通用词：颜色。

// OK
$border-color;
$dark-border-color;
$light-color-border;
$highlight;
$link;
$link-dark;
$text;
$color-text;
$link-color-light;
$lightest-text-color;

// Better
$color-border;
$color-border-dark;
$color-border-light;

$color-highlight;

$color-link;
$color-link-dark;
$color-link-light;

$color-text;
$color-text-light;
$color-text-lightest;

然后，假设我需要一种颜色作为边框。 我开始输入border: 1px solid $colo ，我的文本编辑器会建议我为项目定义的所有颜色变量。

也许我的项目中有很多颜色，但是我只想要边框颜色。 我可以使用所需的边框颜色预定义一些变量。 然后，在编码时，我可以简单地继续缩小变量名border: 1px solid $color-border的特殊性border: 1px solid $color-border ，文本编辑器将自动建议该前缀包含的所有变量。 我要做的就是选择我想要的一个！

即使您没有代码提示，这仍然是命名变量的有效方法。 它可以帮助您轻松地重新命名已命名的变量，因为共享关系的变量共享前缀。

---

结论

以这种模块化的方式命名变量将帮助您从概念上在编码之前，编码期间和编码之后理解项目。 这是双赢的局面！

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-name-your-sass-variables-modularly--webdesign-13364

sass命名变量