定义好的变量名

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

本文由大漠根据Frank的《Choosing great variable names》一文所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://thesassway.com/beginner/variable-naming,以及作者相关信息。

——作者:Frank

——译者:大漠

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

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

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

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

##使用语义化的变量名

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

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

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

1
2
3
4
5
6
7
// 不好的命名方式
$red: red;
$yellow: yellow;
// 更好的命名方式
$brand-color: red;
$accent-color: yellow;

##采纳有用的约定

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

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

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

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

1
2
3
4
5
6
7
// Header
$header-height: 100px;
$header-background-color: $color-brand;
// Footer
$footer-height: 200px;
$footer-background-color: #aaa;

##配置集中放置在一起

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

1
2
3
4
5
@import base/config;
@import base/typography;
@import base/utilities;
@import modules/button;

##总结

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

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载,烦请注明出处:

英文出处:http://thesassway.com/beginner/variable-naming

中文译文:http://www.w3cplus.com/preprocessor/beginner/variable-naming.html