简介
sasspect 是一个可以在 Sass 中实现像 CSS 拟态类一样的样式写法的工具，可以让我们在 Sass 中使用拟态类样式来快速生成类似 iOS 或 Material Design 风格的 UI。
安装
npm install sasspect --save-dev
使用方法
在 Sass 文件中引入 sasspect：
@import "sasspect";
然后就可以在我们的 Sass 中使用拟态类样式了。在 Sass 中使用拟态类申明的语法如下：
-- -------------------- ---- ------- --- - ------- - ----- - -- ---------- ------------------- - ----- - ----------- - -------- -------------- ------- - - - --- - ---- ------------------ - ---- ------------------ - - --- - ------------- -- ----- ----- -- -- - ------- -------- ------- - -------- --------- --------------- -
sasspect 中提供了两种拟态类样式的实现：
- 扁平化拟态类：mono
- 半平面拟态类：side
其中 mono 实现的是扁平化的拟态类，看上去没有明显的底边浮起效果；side 实现的是半平面的拟态类，增加了明显的底边浮起效果。
示例代码
HTML
<button class="button">Click Me</button>
Sass
-- -------------------- ---- -------
------- -----------
-------------- -----
------- -
-------- --------- ---------------
----------------- -----
------ --------------
------- --- ----- --------------
-------- -----
-------- -------------
-------- ---- -----
----------- -------
---------- -----
------- --------
----------- --- --- -----
--------
--------
-------- -
-------- --------- ---------------
------ -----
----------------- --------------
-
-效果展示
总结
sasspect 的使用方法相对简单，只需要在 Sass 中引入即可。
理解并使用拟态类样式可以提高我们前端开发的效率，帮助我们更快地实现现代化的 UI 动效和设计风格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b581e8991b448e304c