stylus入门使用方法

Stylus 是一个富于表现力的、动态的、健壮的 CSS 预处理器。Stylus 提供了一种高效、动态和表达性的方式来编写 CSS。它是用 Node.js 编写的，并且与 CSS 兼容，这意味着你可以直接使用现有的 CSS 代码，并逐步引入 Stylus 的特性。

安装 Stylus

在开始使用 Stylus 之前，你需要在你的系统上安装 Node.js。安装了 Node.js 后，你可以通过 npm（Node.js 的包管理器）来安装 Stylus。
打开命令行工具，运行以下命令：

npm install -g stylus

这将全局安装 Stylus。如果你只想在特定的项目中使用 Stylus，可以在项目目录中运行以下命令进行局部安装：

npm install stylus --save-dev

编写 Stylus 文件

Stylus 文件通常以 .styl 扩展名保存。下面是一个简单的 Stylus 示例：

// 声明变量
font-size = 14px
font-stack = "Helvetica Neue", Helvetica, Arial, sans-serif
// 使用变量和缩进语法
body
  font font-size font-stack
// 混合（Mixins）
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n
button
  border-radius(5px)

编译 Stylus 文件

要将 Stylus 文件编译成 CSS，你可以使用命令行工具。假设你有一个名为 style.styl 的 Stylus 文件，你可以使用以下命令将其编译为 style.css：

stylus -o output.css style.styl

这里，-o 选项指定了输出文件，style.styl 是输入文件。
如果你在项目中局部安装了 Stylus，你可以使用 npm 脚本来编译 Stylus 文件。在 package.json 中添加一个脚本：

"scripts": {
  "build:css": "stylus -o public/css public/stylus"
}

然后，你可以通过运行以下命令来执行这个脚本：

npm run build:css

在浏览器中实时编译

你可以使用 stylus 的中间件来进行实时编译。首先，你需要安装 express 和 stylus：

npm install express stylus

然后，你可以在你的 Node.js 应用中使用以下代码：

const express = require('express');
const stylus = require('stylus');
const app = express();
app.use(stylus.middleware({
  src: __dirname + '/public',
  dest: __dirname + '/public'
}));
app.use(express.static(__dirname + '/public'));
app.listen(3000);

这样，每次修改 .styl 文件时，stylus 中间件都会自动重新编译 CSS 文件。

结语

Stylus 是一个强大的工具，它可以让你的 CSS 代码更加简洁、可维护。通过学习 Stylus 的基本语法和特性，你可以提高 CSS 编写的效率，并实现一些在纯 CSS 中难以实现的布局和样式效果。随着你对 Stylus 的深入了解，你将能够更好地利用它的功能来优化你的前端项目。