介绍
使用less作为css预处理器，可以让前端工程师更快速、灵活、方便地进行样式书写，同时也方便了css代码的维护和修改。但是，写less的时候有时比较繁琐，需要一些写less的经验和技巧。有些前端开发者可能会把大部分时间都耗费在了编写样式上，而不是去完成更具创意的页面设计和功能开发。 那么，如何解决这个问题呢？这里介绍一个npm包 —— cube-less。
cube-less是什么？
cube-less是一个css预处理器库，它封装了less，并给less添加了一些语法糖，以提升less写作效率，使得开发者可以快速进行样式书写和数值计算操作。
cube-less可以做什么？
- 自动生成 rem 单位
- 自动生成 vw、vh 单位
- 函数调用
- 数学计算
- 兼容低版本浏览器
- 选择器嵌套
- Less循环、条件语句等
如何使用 cube-less？
下面介绍cube-less的安装过程以及与less的对应使用方法：
1. 安装 cube-less
在项目根目录下执行以下命令：
npm install cube-less
2. 配置 webpack 来编译 cube-less
在webpack中配置less或者css loader的时候，把less-loader或css-loader实例化的参数修改如下：
配置 rem
-- -------------------- ---- -------
-------------
-
------- --------------
-------- -
-------- -----------------------
-------- -- ---------
---
-
-配置 vw/vh
-- -------------------- ---- -------
-------------
-
------- --------------
-------- -
-------- -----------------------
------- --- ---------
---
-
-3. 常规使用
-- -------------------- ---- ------- ------- ------------------------------------ ---- -- ---------- ----- - ------ ----------- ----- - -- -------- ----- - ------ -------- - ------ -
示例代码
-- -------------------- ---- -------
---
- ------------
-
- --------------
- ------------
---
------- ------------------------------------
---- -
------ ------ -- ---------
------- ----- -- ---------
-
--------
-------------
-
----- -
------ ----------- --- ---------
------- ------------- - ----- --------
-- -----------------------------
--------- -------
-
------------
----------------- ------- ---- ------- -- ------- -
-------------- -
------ ------ - -----
-
-- ---------------
---------------- - -- --------
-
------------ ----注意事项
- 需要在引入cube.less之前引入 reset.css 或者 normailze.css。
- 建议先使用cube-less，less之后再使用css。
- css中的属性带连字符(-)需要用方括号[]表示。
总结
本文介绍了npm包 cube-less 使用教程，介绍了cube-less的特点和优势，及其在实际项目中的应用。希望读者能够通过本文对其有一个基本的了解，能够在自己的项目中快速上手应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74230