前言
在前端开发过程中，我们经常要使用 CSS 技术来为页面增添样式。但是，使用原始的 CSS 具有局限性，无法实现更多复杂的效果。因此，许多人转向了预处理器，如 SASS 和 LESS 。但是，这些预处理器在使用过程中，还是会遇到一些问题。这就是为什么有一些人选择使用 stylus，这个比较不知名的预处理器。
在 stylus 中，我们可以使用 stylus-require-css-evaluator 这个 npm 包，来方便的使用 CSS 语法和 stylus 的 mixin 功能。
安装和使用
安装
npm install stylus-require-css-evaluator
引入
const stylus = require('stylus');
const cssEvaluator = require('stylus-require-css-evaluator');
//添加 evaluator
stylus(css).use(cssEvaluator);实现方式
在 stylus 中使用 CSS 语法，需要以 css 开头。如：
body
color: #333
css
h1 {
font-size: 28px;
color: #f00;
}上述代码中，我们使用了 CSS 语法来设置了 h1 的样式。
在 stylus 中，我们还可以使用 mixin 的功能。如：
lessThan640Width() {
@media (max-width: 640px) {
{block}
}
}上述代码中，我们定义了一个 mixin ，用来设置当浏览器宽度小于 640px 时的样式。
示例代码
-- -------------------- ---- -------
----- ------ - ------------------
----- ------------ - ----------------------------------------
----- --- - -
---- -
------------ ------
------ -----
---
-- -
---------- -----
------ -----
-
------- -
----------------- -----
------- -----
---------------- -
------- -----
-
-
------- -
----------------- -----
------ -----
------- -----
-
-
--
------------------------------------------ ---- -- -
-- ----- ----- ----
-----------------
---上述代码中，我们使用了 stylus-require-css-evaluator 这个包，来实现在 CSS 中使用 mixin 和 @media 的功能。我们设置了 body、h1、.header 和 .footer 的样式，并且在 .header 中使用了 lessThan640Width() 这个 mixin，来设置当浏览器宽度小于 640px 时的样式。
总结
通过本文的介绍，我们可以发现 stylus 与 CSS 的差异性，并使用 npm 包 stylus-require-css-evaluator 更加方便使用 stylus 和 CSS 的技术。在前端开发中，选择适合自己的预处理器，可以更好的提高代码的可维护性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cc081e8991b448da5d0