抽像命名 Sass 变量 - 文章教程

抽像命名 Sass 变量

发布于 2021-11-30 字数 4782 浏览 887 评论 0

Phil Karlton 认为,在计算机科学中,最大的难题之一就是:命名。这一问题在给变量命名时显得尤为突出。

目前,通过使用变量处理颜色、断点和字体大小,是一个很棒的实践。更进一步,你也可以通过使用 SASS Maps 和混合宏生成动态类名。这种方式在不影响用户视觉体验的基础上,还能让你的工作更有效率。

反模式(Anti-pattern)

$red, $blue$green 都是有意义的变量名,但是如果你想将红色变为黑色,又该如何做呢?$red这个变量名,此时就显得没有价值了。

媒体查询的断点也有同样的问题。$mobile, $tablet$desktop 并不代表真实的设备尺寸。即使是 $small, $medium$large,也面临着上述颜色变量名的问题。当需要增加一个断点时,你会怎么做呢? $extra-small$extra-large 看上去还不错。那么 $extra-medium 呢?

此外,就更不用说 min-widthmax-width 和像素密度断点(pixel density breakpoints)。

抽象

所有和值有直接关系的变量名,都不应该用在 Sass 中,所以 Sass 的变量名和值应该是分离的。

颜色

为色彩设置抽象的变量名,有一种方式我称之为 两级变量(two-layer variable)。最近,我发现也有其他人在用这套方案。

  1. 像平常一样定义颜色变量
  2. 定义一个描述性的变量,并引用第一步定义的变量作为值
  3. 在 SCSS 中使用描述性变量

这使得交换两个不同的颜色变得非常容易,尤其是仅需要在一个文件中修改时,完全不需要担心命名问题,更不需要在整个项目中查找和替换相应的颜色。

就像这样:

// 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 的工具,通过使用模块比例实现垂直方向的规律化变动。

总结

命名变量的最佳方式就是使用抽象名词,取消名字和值之间的直接关系。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

归属感

这个人比较懒,什么都没有填写!

14 文章
2 评论
20954 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0