介绍
microcss 是一种轻量级的 CSS 模板语言，它提供了一种简单的方式去定义 CSS 样式。microcss 自动为你生成 CSS 类名并提供了一个简洁明了的语法，让你不再需要记忆繁琐的 CSS 选择器，并且大大减少了样式冲突的情况。
此教程将带你入门 microcss 的基础知识和使用方法。无需担心，我们的入门篇并不会涉及高深的知识点或使用方法。
安装
您可以通过 npm 来安装 microcss。打开您的终端并输入以下命令：
npm install microcss
快速上手
基础语法
我们先对 microcss 的基础语法做一个简短的介绍。在 microcss 中有两个主要的标记 < 和 >。在 < 和 > 之间的文本被视为生成的 CSS 类名。在这两个标记之外的文本则是我们所定义的 CSS 样式。
下面是一个简单的例子：
-- -------------------- ---- -------
------------- --------- ----------
-------
----------
------ -
------ ----
-
-----------
--------在上面的例子中，<redclass> 和 </redclass> 标记之间的文本生成了.redclass CSS 类名。.redclass 类名下的样式是文本颜色为红色。
变量
microcss 还提供了一种简单的方式来定义变量。变量可用于存储颜色、字体、边框等多种属性。您可以使用 : 语法来定义变量。例如：
-- -------------------- ---- -------
-------
--------
--------------- --------
----------------- --------
---------
--------
------- -
----------------- ---------------
------ ------
-------- ---- -----
-------------- ----
-
------------- -
----------------- -----------------
-
---------
--------
------- ---------------------------在上面的例子中，我们定义了两个颜色变量 $primary-color 和 $secondary-color 并分别将它们用于定义 .button 的背景颜色和悬停颜色。这些变量还可以在样式表的其他地方使用。
循环和条件语句
microcss 的语法不仅提供了变量，还支持循环和条件语句等控制结构。
以下是使用 for 循环进行表格渲染的示例：
-- -------------------- ---- -------
-------
--------
------ -- -
------- --- ----- -----
-------- -----
-
---------
-------------
-------- -------- ----- --------
------- --
---- -- ---- - -- -- -
---------- ----------------
----------
----------------- -
----------------- ----------
-
-----------
------ - ------ - --------------- - --
-
--------------
--------
------ --------------
---- -- ---- - -- -- -
----
----------
-----------
-----------
-----------
-----
-
--------该示例将生成一个包含 10 行表格，每行的背景颜色交替为白色和灰色。此外，我们还使用了 @for 循环来生成表格的结构。
匹配器
您可以使用匹配器来更详细地指定您的选择器。例如，您可使用下面的代码创建所有以 .container- 开头的 CSS 选择器：
<style>
<%container-*%>
.container {
padding: 10px;
}
</%container-*%>
</style>这段代码将为所有以 .container- 开头的选择器定义了一个共同的边框宽度和圆角。
函数和 mixin
microcss 还支持使用函数和 mixin。我们能够定义一个函数来返回具有多种属性的 CSS。例如：
-- -------------------- ---- -------
-------
--------
--------- ---------------------- -
------ -------------- ------- ------- ------- --------
-
------- -
------ ------
------- ------
------- -----
----------------- --------
-------- --------------------
------- --- ----- -----
-
---------
--------
---- ---------------------该示例将生成一个边缘半径为 50px 的圆形图片。我们使用 @function 来定义了一个半径函数，然后用 @include 在 .avatar 中调用这个函数。
示例代码
您已经了解了 microcss 的基础语法和基本用法。下面是一个完整的示例代码，涵盖了 microcss 所有主要的功能和特性，帮助你将思路转化为真正的 CSS 样式。你可以参考这个 codepen 链接查看效果：https://codepen.io/sassy_denis/pen/expBVWN
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
-------
---- ---- ----
-----------
----------- ---------- ------ ---------- ------ -----------
--------------- --------
----------------- --------
--------------- --------
-------------- --------
--------------- --------
------------ --------
------------- --------
------------ --------
------------
---- ---- ----
-------------
---- -
------------ -----------
------- --
-
- -
------ ---------------
---------------- -----
------- -
------ -----------------------
-
-------- -
------ ---------------------- -----
---------------- ----------
-
-
---------- -
---------- -------
------- - -----
-------- -----
-
----- -
-------- ------------ --- ---- ------- -- -- ------
----------------- -----
-------------- ----
--------- -------
------- ---- --
------------ -
-------- -------------------------------
-------- ------------ ------
-------- ----------------- ----- -----------
-- -
------- --
-------- ----------------
-
-
---------- -
-------- --------------
-
------------ -
-------- ------------ ------
-------- -------------- ----- -----------
-
-
------- -
-------- ------------ ------
-------------- ----
-------- -------------
------- -
---------------- -----
-
-
--------------- -
-------- ---------------------------------
------ -----
------- -
-------- --------------------------------------- -----
-
-
--------------- -
-------- ---------------------------------
------ -----
------- -
-------- --------------------------------------- -----
-
-
-------------- -
-------- --------------------------------
------ -----
------- -
-------- -------------------------------------- -----
-
-
--------------
---- --- ----
----------
---- -------------
---- --------------------
---------------------- -------------------------
------
---- ------------------
-------------------- ---- ---- ---- -----------------------
------
---- --------------------
----------------- -------- ------------- --------------------- ------------------------
------
------
-----------
--------
-------
------
---- ------------------
---- -------------
---- --------------------
------------- ----------
------
---- ------------------
----------- -- - ----------- --- ---------- -------- ---- --------- --- ----- ----- --- --- -------------- -- ---- -------- -- --- -- -- ------ - ------ -------------- ----------
----
----------- ---- --------- -----------
--------- ---- ------- ---- --- -----------
-----
------
---- --------------------
-- -------- ------------- --------------------- --------
------
------
---- ---------------------
---- --------------------
----------- ---------
------
---- ------------------
------- -- - ------- ---------
------
---- --------------------
-- -------- ------------- --------------------- --------
------
------
---- ---------------------
---- --------------------
----------- ---------
------
---- ------------------
------- -- - ------- ---------
------
---- --------------------
-- -------- ------------- --------------------- --------
------
------
---- --------------------
---- --------------------
---------- ---------
------
---- ------------------
------- -- - ------ ---------
------
---- --------------------
-- -------- ------------- -------------------- --------
------
------
------
-------
-------总结
在本教程中，我们了解了 microcss 的基本语法和主要特性，包括变量、循环、条件语句、匹配器、函数和 mixin。 microcss 是一个强大的工具，可以帮助您减少记住 CSS 选择器和类名的难度，同时巧妙地生成您所需的 CSS 类名。我们希望这个教程可以帮助你更好地掌握 microcss，并可以在您的前端项目中得到广泛应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040eee