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

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

发布于 2019-08-28 字数 2206 浏览 1429 评论 0

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如何命名变量的建议,但哪一种才是适合你或你的团队的工作方式呢?这就是你需要关注的地方。选择好的命名变量的方式,这将能更好的帮助你维护和开发你的项目样式表。

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

扫码加入群聊

发布评论

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

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

关于作者

1848719402

文江的微博,一个平凡的草根站长。

6 文章
1 评论
3933 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0