前言
使用 CSS 编写样式是前端开发的基础之一，而变量是一种方便而且强大的工具。它可以帮你维护样式的一致性和可读性。当项目变得越来越复杂时，变量越发变得重要。
scaled-vars 是一个 npm 包，它可以帮助你快速生成基于 rem 或者 em 单位的、可扩展的 CSS 变量集合，从而简化你的工作流。
在本文中，我们会介绍 scaled-vars 的原理，用法以及一些示例代码。我们会讲述如何使用 scaled-vars 从头开始构建一个可伸缩的网站样式，并展示如何使用 breakpoint 以及颜色调色盘。
scaled-vars 简介
scaled-vars 是一个基于 JS 的 npm 包，它提供了一个简单的方法，可以使用 rem 或者 em 单位来生成可扩展的 CSS 变量集合。经过 scaled-vars 处理的样式表可以随着不同的基准字体大小或者行高比例而发生变化。同时，scaled-vars 非常容易集成到现有的 CSS 工作流中。
scaled-vars 采用了以下特性：
- 自定义变量集合
- 按比例缩放的值
- 自动类型转换为数值（支持算术计算）
- 变量继承（类似于 Sass ）
- breakpoint
自定义变量集合
在得到 scaled-vars 处理后的 CSS 样式表中，需要使用的变量都在一个对象中定义，并且可以通过名称的方式引用。下面是一个包含默认变量集合的示例：
-- -------------------- ---- ------- ----- - ------------ ----- ----------------- ------- ---------- -- ---------- -- -------------- ----------- -------------- ---- ------------------- ----- ------------------- ------ -
其中， --grid-unit 和 --base-font-size 是必须设置的变量，并且需要使用 rem 或者 em 单位来定义。这里我们使用了相对单位，这意味着它们都基于浏览器默认字号（16px）进行计算。例如，当 --base-font-size 为 1.6rem 时，它的实际像素大小就是 25.6px。
按比例缩放的值
scaled-vars 提供了一个方便的函数 Scale()，可以将 CSS 值转化为 rem 或者 em 单位。你只需要将基准值和目标值传入，scaled-vars 将根据基准值调整目标值并返回一个用于 CSS 的字符串。
例如：
.main-nav {
font-size: Scale(20, --base-font-size);
padding: Scale(10, --base-font-size, 1.5);
margin-bottom: Scale(40, --base-font-size, 0, 1);
}以上示例中，font-size 属性使用了默认的比例（即目标值除以基准值），所以计算的结果和原始值一致。而 padding 属性和 margin-bottom 属性则提供了自定义的比例，它们分别仅在宽度和高度两个维度上进行缩放。
自动类型转换为数值
scaled-vars 会自动解析传入的值，并且完全支持算术计算，包括加减乘除以及任意复合运算。
例如：
-- -------------------- ---- -------
------------- -
----- - - -------- - ------
-
------ ----------- ------ -
------------ -
-------------- --------------- - ------
-
-
----------- -
---------- --------- ----------------- - - - ----
-在上述示例中，我们分别使用了 Calc() 和 Calculate() 函数，它们可以支持格式为 "rem " 或 "em " 的传入值。
变量继承
scaled-vars 采用了类似 Sass 的语法，允许变量继承。你可以通过 $var: other-var 的方式来设置一个变量，从而使它的值等于另一个变量的值。例如：
:root {
--font-family: sans-serif;
--heading-font: $font-family;
--color-black: #000;
--color-heading: $color-black;
}breakpoint
scaled-vars 提供了一些辅助函数，可以快速创建跨断点（breakpoint）的样式。有两个指定断点的变量 $_max-width 和 $_min-width，它们可以在定义的变量集合中使用。
示例如下：
-- -------------------- ---- -------
----- -
-------------- -----------
--------------- -------------
------------------- -----
------------------- ------
------------------ --------- ------------------
------------------- --------- ------------------
------------------ --------- ------------------
------------ ------
--------------- -----
------------------ -----
------ ----------- ------------ -
--------------- -----
------------------ --------
-
-在上述示例中，我们定义了两种不同的 --main-padding 和 --main-background，分别在 $_min-width 所指定的断点后启用。
例子：构建一个可伸缩的网站样式
最好的学习方式就是实践。下面我们将用 scaled-vars 搭建一个可伸缩的网站样式。
设置变量
首先，我们需要设置一些基本的变量，例如字号，颜色以及间距。示例代码如下：
-- -------------------- ---- -------
----- -
-------------- ------ -----------
------ --------
------- --------
------------ --------
-------- --------
----------------- ------------
-------------- ----
--------- ------------
---------------- ----
------------- - --- ---- ------- -- -- ----
------------- ------------
---------------- ---------------------- - ------------- - ---
------ ----------- ------ -
------------- -------------
-
------ ----------- ------ -
------------- -------------
-
------ ----------- ------- -
----------------- ------------
------------- -------------
-
-在定义好基本的样式变量之后，我们就可以通过 {} 中的属性和值来设置不同元素的样式。不过，在实际中，我们往往要复用每个变量，因此我们需要采用 scaled-vars 的变量继承来避免重复。
-- -------------------- ---- -------
----- -
-------------- ------ -----------
------ --------
------- --------
------------ --------
-------- --------
----------------- ------------
-------------- ----
--------- ------------
---------------- ----
------------- - --- ---- ------- -- -- ----
------------- ------------
---------------- ---------------------- - ------------- - ---
------ ----------- ------ -
------------- -------------
-
------ ----------- ------ -
------------- -------------
-
------ ----------- ------- -
----------------- ------------
------------- -------------
-
-
---- -
------------ -------------------
---------- ----------------------
------------ -------------------
------ -------------
-
------ -
------- ---------------------
----------- ------------
----------- ------------------
-
-- -
----------- --------------
---------- ------------
-
------- -
----------- ------
------- ------------------
-------- -----
---------------- --------------
------------ -------
-------------- --- ----- ------------
-
------- - -
------- - --------------
------ -----------------
---------------- -----
---------- ------------
-
------- ------- -
------ -----------
-
-------------- -
----------- --------------
-------------- --------------
---------- ------------
-
----- -
-------------- --------------
----------- ------
-------------- ---------------------
----------- ------------------
-
----- ------ -
----------- --
-------------- --------------
------------ -----
---------- ------------
-
----- -------- -
-------------- --------------
---------- ------------
------------ -------------------
-由于 scaled-vars 自动生成可变集合，所以我们可以非常方便地维护和更新样式。
如果我们需要进行调整（例如，增加某些断点），我们只需要在样式集合中更新变量，并重建样式即可。
小结
在本文中，我们通过一个从头开始构建的样例，了解了 scaled-vars 以及它的一些点功能。我们学会了如何定义变量集合，如何使用比例缩放功能，如何自动解析数值和支持算术以及如何利用断点和继承等特性构建一个可伸缩的网站样式。scaled-vars 是一个有用而且强大的工具，它可以帮助我们更好地维护和管理我们的样式。（完）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6481e8991b448db286