Bracescss 是一种基于括号表达式的 CSS 预处理器，它能够让开发者更方便地编写复杂的样式表。而 bracescss.core 是 Bracescss 的核心模块，它为开发者提供了一些列的方法和工具，方便对样式进行处理和插件开发，接下来，我们来一步步学习和了解 bracescss.core 的使用方法。
安装和引入
首先，我们需要使用 npm 来安装 bracescss.core:
npm install bracescss.core
安装完成后，我们可以直接在代码中使用 require 来引入 bracescss.core，如下所示：
const braces = require('bracescss.core');样式处理
Bracescss 的核心就是基于括号表达式，我们可以使用 braces.parse 方法将样式表转换成一个 AST (抽象语法树) 对象，方便我们对样式进行处理和解析。
const ast = braces.parse(`
div {
width: (100-20)px;
height: (100+50)%;
}
`);
console.log(ast.toCSS());上述代码会输出：
div {
width: 80px;
height: 150%;
}我们也可以使用 braces.transform 方法来实现样式的转化和处理：
-- -------------------- ---- -------
----- --- - -
--- -
------ -----------
------- ----------
-
--
----- -------------- - --------------------- -
-------- -
-
-------------- ------------
----------- -
-------- ------ -
------------------- -- -
----------------------- -- -
-- ------------------------ --- --- -
---------- - ----------------------
-
---
---
-
-
-
-
---
----------------------------上述代码会将样式进行一个 calc 替换：
div {
width: calc(80px);
height: calc(150%);
}插件开发
最后，我们来学习如何开发一个简单的 Bracescss 插件，这里我们需要使用 braces.transform 和 Postcss 来实现。
-- -------------------- ---- -------
----- ------ - --------------------------
----- ------- - -------------------
----- ------ - --------------------------- -- -- -
------ ---- -- -
------------------- -- -
----------------------- -- -
-- ------------------------ --- --- -
---------- - ----------------------
-
---
---
--
---
----- --- - -
--- -
------ -----------
------- ----------
-
--
----- -------------- - --------------------- -
-------- --------
---
----------------------------上述代码会将样式进行一个 calc 替换：
div {
width: calc(80px);
height: calc(150%);
}小结
通过本文，我们学习了 bracescss.core 的安装和引入，以及使用方法和插件开发教程，并实现了一个简单的样式处理插件。Bracescss 是一个非常有意思的项目，通过括号表达式的形式来编写 CSS，让我们写代码更加的高效便捷，大家可以尝试一下对 Bracescss 的深入研究。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde5093