简介
tfcss 是一个能够快速编写样式文件的 npm 包。它能够自动编译 CSS，并提供多种样式前缀，并支持自定义颜色。
安装
在项目文件夹下打开命令行窗口，输入以下命令安装 tfcss：
npm install tfcss
使用
在 HTML 文件中引用已创建的 CSS 文件即可。
<head> <link rel="stylesheet" href="./css/style.css" /> </head>
在 CSS 文件中，你可以使用 tfcss 的多种特性：
前缀
tfcss 自动为你添加浏览器前缀，避免不兼容的问题。以下代码将为 .box 添加 CSS transition 效果，并在 Chrome 55+、Firefox 52+、Safari 9.1+、IE10+ 等浏览器中生效。
.box {
transition: all 0.3s;
}颜色
tfcss 提供多个颜色选择器，并可通过自定义颜色设置颜色。以下代码将 .box 背景色设置为蓝色。
.box {
background-color: blue;
}代码压缩
tfcss 支持代码压缩，可将 CSS 文件压缩至最小化。
/* 压缩前 */
.box {
margin: 10px;
padding: 10px;
}
/* 压缩后 */
.box{margin:10px;padding:10px}示例代码
HTML 文件
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------- --
-------
------
---- ----------------- ------------
-------
-------CSS 文件
-- -------------------- ---- ------- ---- - ------- ----- -------- ----- ----------------- ------- ----------- --- ----- - ---------- - ----------------- ----- -
总结
tfcss 能够大幅度提高前端开发效率，使我们在写样式时更加轻松愉快。它能够帮我们自动添加浏览器前缀，设定颜色，压缩代码等等。如果你是一名前端工程师，不妨试试 tfcss 吧，他一定会帮助你减轻负担，节省时间成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74690