前言
在前端开发中，我们经常会遇到需要对页面元素进行尺寸调整的情况。而 CSS 中的 width 和 height 属性是最常用的尺寸属性之一。然而，在编写 CSS 时，频繁使用 px、em、rem 等单位来设置尺寸往往比较繁琐。为此，有一个叫做 postcss-short-size 的 npm 包可以帮助我们更便捷地设置元素尺寸。
什么是 postcss-short-size
postcss-short-size 是一个基于 postcss 的插件，可将 CSS 中的长宽属性简写为一个属性。这个属性名默认为 sz，例如：
.foo {
sz: 10px;
}上述代码等同于：
.foo {
width: 10px;
height: 10px;
}同时，还支持以下写法：
.foo {
sz: 10px 20px; /* 等同于 width: 10px; height: 20px; */
sz: 10px 20px 30px; /* 等同于 width: 10px; height: 20px; padding-bottom: 30px; */
sz: 10px 20px 30px 40px; /* 等同于 width: 10px; height: 20px; padding-bottom: 30px; padding-left: 40px; */
}如何使用 postcss-short-size
在项目中使用 postcss-short-size 非常简单。下面以 webpack 为例，介绍如何在项目中配置该插件。
首先，安装 postcss-short-size：
npm install postcss-short-size --save-dev
然后，在项目根目录下创建一个名为 postcss.config.js 的文件，并在其中配置 postcss-short-size 插件：
module.exports = {
plugins: [
require('postcss-short-size')
]
}最后，在 webpack 配置文件中加入对 postcss-loader 的配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ---------------- ------------- -----------------
-
-
-
-这样就完成了 postcss-short-size 的配置。接下来，我们可以在 CSS 中愉快地使用 sz 属性啦！
示例代码
下面是一个使用了 postcss-short-size 的示例代码：
-- -------------------- ---- ------- ---- - --- ------ ----------------- ----- - ---------- - --- ---- ---- ----------------- ----- - ------------ - --- ---- ---- -- ----------------- ----- -
编译后的结果如下：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ----------------- ----- - ---------- - ------ ----- ------- ---- ----------------- ----- - ------------ - ------ ----- ------- ----- --------------- -- ----------------- ----- -
总结
使用 postcss-short-size 可以帮助我们更便捷地设置元素尺寸，从而减少 CSS 编写中的冗余代码。虽然这个插件的功能比较简单，但是在一些复杂的页面布局中却可以发挥巨大的作用。希望本篇教程对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43427