什么是 @sirus/stylus？
@sirus/stylus 是一款基于 stylus 的前端工具库，提供了很多实用的 mixin 和函数，能够极大的简化开发流程，并提高 CSS 的复用性。它非常适合用于大型项目的开发，但也可以用于小型或个人项目中。
安装和引入
使用 npm 进行安装：
npm install @sirus/stylus
引入 @sirus/stylus：
@import '@sirus/stylus'
常用 mixin 和函数
Box 属性
Box 属性是一个非常实用的 mixin，可以帮助我们快速设置元素的宽度、高度、边框、内外边距等属性，用法如下：
-- -------------------- ---- ------- ---- ----- -- ---- - ------ ----- ------- ---- - ---------- -- ------------- ---------- ------- -- ---------------- ---------- ------- -------- -- -------------------- ---------- ------- -------- ------- -- --------------- ---------- ------- -------- ------- ------- -- ------------------ -- -- ---- ---------- ------ -----
Absolute 属性
Absolute 属性可以帮助我们将元素定位到父元素的指定位置，用法如下：
.absolute(pos) // pos 可选值为 top/left/right/bottom
Ellipsis 属性
Ellipsis 属性可以在一段文本过长时自动省略，用法如下：
.ellipsis // 省略号出现的位置默认为尾部 .ellipsis(head) // 省略号出现的位置为开头 .ellipsis(middle) // 省略号出现的位置为中间 // 示例 .text ellipsis()
Flex 容器和项目
Flex 属性可以帮助我们快速进行 flex 布局，用法如下：
-- -------------------- ---- -------
----------
------- ----
---------------
------- ----
----------- ------ -- ----
--------------- ------ -- ----
--------------------
--------------- ----------
------------------
--------------- --------
----------------------
--------------- -------------
---------------------
--------------- ------------
-----------------------
--------------- ------
----------- ------
-- --
----------
---------
-----
----------------------颜色函数
@sirus/stylus 还提供了一些实用的颜色函数，用法如下：
-- -------------------- ---- ------- -------------- ------- -- ----------- --- - - --- ------------- ------- -- ----------- --- - - --- ----------------- ------- -- -------------- --- - - --- --------------- ------- -- -------------- --- - - --- ----------- ------- -- -------------- --- ---- - --- -- -- ---- ---------------- ------------- ---- -- -- --- ----- ------------ ---- -- -- ---
边框函数
@sirus/stylus 还提供了一些实用的边框函数，用法如下：
border-radius(radius, [position]) // 设置边框圆角，radius 默认值为 4px，position 可选值为 top/bottom/left/right border-top-radius(radius) // 设置上边框圆角 border-right-radius(radius) // 设置右边框圆角 border-bottom-radius(radius) // 设置下边框圆角 border-left-radius(radius) // 设置左边框圆角 border-color(color) // 设置边框颜色 border-dashed([border-color], [border-width]) // 设置虚线边框 border-solid([border-color], [border-width]) // 设置实线边框
其他函数和 mixin
@sirus/stylus 还提供了一些其它实用的函数和 mixin，例如：
rem(px) // 把 px 值转换成 rem 值 line-clamp(number) // 控制文本的行数 triangle() // 绘制 CSS 三角形 // 示例 .title font-size rem(18px) line-clamp(2)
总结
@sirus/stylus 是一款非常实用的前端工具库，提供了许多实用的 mixin 和函数，能够快速简化开发流程。使用它能够让我们更加专注于业务逻辑的实现，同时也能有效提高代码的复用性和可维护性。希望这篇教程能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0b80