Phil Karlton 认为,在计算机科学中,最大的难题之一就是:命名。这一问题在给变量命名时显得尤为突出。
目前,通过使用变量处理颜色、断点和字体大小,是一个很棒的实践。更进一步,你也可以通过使用 SASS Maps 和混合宏生成动态类名。这种方式在不影响用户视觉体验的基础上,还能让你的工作更有效率。
$red
, $blue
和 $green
都是有意义的变量名,但是如果你想将红色变为黑色,又该如何做呢? $red
这个变量名,此时就显得没有价值了。
媒体查询的断点也有同样的问题。 $mobile
, $tablet
和 $desktop
并不代表真实的设备尺寸。即使是 $small
, $medium
和 $large
,也面临着上述颜色变量名的问题。当需要增加一个断点时,你会怎么做呢? $extra-small
和 $extra-large
看上去还不错。那么 $extra-medium 呢?
此外,就更不用说 min-width
、 max-width
和像素密度断点(pixel density breakpoints)。
所有和值有直接关系的变量名,都不应该用在 Sass 中,所以 Sass 的变量名和值应该是分离的。
为色彩设置抽象的变量名,有一种方式我称之为 “两级变量(two-layer variable)”。最近,我发现也有其他人在用这套方案。
这使得交换两个不同的颜色变得非常容易,尤其是仅需要在一个文件中修改时,完全不需要担心命名问题,更不需要在整个项目中查找和替换相应的颜色。
就像这样:
// Colours // All colour variable names should come from http://chir.ag/projects/name-that-color/ $azure: #2C65AB; $shamrock: #2ECC71; $white: #FFFFFF; $graychateau: #9CA1A4; $tundora: #404040; $mystic: #E9EDF2; $botticelli: #CED8E4; $alto: #DDDDDD; $gallery: #EEEEEE; $portafino: #FFFBB8; $alabaster: #F8F8F8; // Network colour variables should be named after their network // Each name is also the class name to be applied $network-colors: ( twitter: #00ACED, youtube: #CD201F, pinterest: #CB2027, github: #333333, dribbble: #EA4C88, instagram: #517FA4, facebook: #3B5999 ); // Search Colours $search-color: $tundora; $search-bg-hover: $azure; $search-color-hover: $white;
曾几何时,对于颜色命名一筹莫展?在 Name That Colour 网站中输入十六进制颜色,即可得到可使用的颜色名。So easy!
断点是一个难题。我曾经使用过 $bp1
、 $bp2
、 $bp3
等等,并且现在还可以很好地继续添加和维护。但 $bp1-1
和 $bp1-2
就是不够简洁。
因此,我决定使用说唱歌手的名字,因为断点就像是某种包装器?明白?好,继续……
就像这样:
$dre: 320px; $diddy: 480px; $jayz: 600px; // Using breakpoint it’s as simple as @include breakpoint( $dre ) { width: 320px; }
你可能认为这么做,值和变量名很难联系起来,但实际上只在很少几个样式表中引用了它们,或者你也可以在需要的时候查看 _vars.scss
文件。
你可以使用使用 px to rem conversion utility ,将其转换为相关联的值: $dre: u(320px);
。
我不建议使用当前设备的尺寸作为断点,因为这只是个隔离,而应该根据内容而添加断点——简短而频繁。
我曾经使用和改进过 Typeplate ,非常喜欢它们处理变量名的方法;此外,我还使用过 Greek alphabet ,它也有一个已经定义好的顺序。但因为它们有明显的层次结构,也不可取。
既然任何非线性的单词列表都是可接受的,使用 abstract nouns 怎么样?或者使用 sports car names 。
$beauty: 16px; $bravery: 28px; $brilliance: 51px; $brutality: 90px;
实际上,你可以使用任何喜欢的列表,前提是列表的主题对于每个变量类型都是一样的。
高级技巧:你也可以使用类似 Gridlover 的工具,通过使用模块比例实现垂直方向的规律化变动。
命名变量的最佳方式就是使用抽象名词,取消名字和值之间的直接关系。
本文根据 @Craig 的《 Better SASS variables through abstraction 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: http://craigmdennis.com/articles/better-sass-variables 。
在校学生,本科计算机专业。狂热地想当一名作家,为色彩和图形营造的视觉张力折服,喜欢调教各类JS库,钟爱CSS,希望未来加入一个社交性质的公司,内心极度肯定“情感”在社交中的决定性地位,立志于此改变社交关系的快速迭代。