在前端开发中，CSS 是构建页面样式的重要工具。然而，随着项目的复杂度增加，传统 CSS 的局限性也逐渐显现。Stylus 作为一款优秀的 CSS 预处理器，为开发者提供了更高效、更专业的样式编写方式。下面，我们将结合 readme.md 文件的内容，深入了解 Stylus 的相关知识。
全局安装 Stylus
在使用 Stylus 之前，需要先进行全局安装。可以通过以下命令完成：
npm install -g stylus
这里使用 npm（Node Package Manager）进行全局安装，-g 参数表示全局安装，安装完成后，你就可以在任何项目中使用 Stylus 了。
Stylus 是什么
Stylus 是一个 CSS 预处理器，它具有以下特点：
- 更快、更专业：Stylus 提供了更简洁的语法和更强大的功能，让开发者能够更高效地编写样式代码。
- .styl 后缀的文件：Stylus 文件通常使用
.styl作为后缀，方便与普通 CSS 文件区分。 - 编译成 CSS：虽然 Stylus 有自己独特的语法，但浏览器最终只能识别 CSS。因此，需要将
.styl文件编译成 CSS 文件，才能在网页中使用。 - CSS 的超集：Stylus 兼容 CSS 语法，你可以在 Stylus 文件中直接使用 CSS 代码。这意味着你可以逐步引入 Stylus，而不必担心与现有的 CSS 代码冲突。
在终端运行为styl和css创立连接
stylus -w common.styl -o common.css
一些 CSS 特性与 Stylus 的关联
继承特性
在 CSS 中，有些属性是可以继承的，比如字体大小和颜色。默认情况下，网页中的字体大小是 16px，颜色是黑色。如果在 body 元素中设置了颜色，子元素会继承这个颜色。但也有一些属性不会继承，这在编写 CSS 时需要特别注意。
背景尺寸属性
background-size 是一个常用的 CSS 属性，它有两个重要的值：
cover：等比例缩放背景图片，使其覆盖整个元素，可能会裁剪部分图片，重点在于元素本身。
contain：等比例缩放背景图片，使其完整显示在元素内，重点在于背景图片本身。
模块特性
CSS 也可以像 JavaScript 一样具有模块特性。Stylus 在这方面表现得更加出色，它支持使用 tab 缩进和自动补全 CSS 前缀，同时引入了模块和作用域的概念。这使得代码结构更加清晰，易于维护。
如下，可以设置元素，可以直接在父标签tab下写入：
视口属性
在 readme.md 中提到了 viewport user-scalable=no;，这是用于控制网页在移动设备上的缩放行为。在 index.html 文件中，有如下的 meta 标签：
<meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
这里的 user-scalable=no 表示禁止用户手动缩放页面，width=device-width 表示页面宽度等于设备宽度，initial-scale=1 表示初始缩放比例为 1。
如果user-scalable=yes，用户端双击误触会放大页面，根据需求设计：
总结
Stylus 作为一款强大的 CSS 预处理器，为前端开发者提供了更高效、更灵活的样式编写方式。通过全局安装，我们可以在项目中使用 .styl 文件编写样式，并将其编译成 CSS 文件供浏览器使用。同时，了解 CSS 的一些特性，如继承、背景尺寸、模块特性和视口属性，有助于我们更好地使用 Stylus 进行前端开发。希望本文能帮助你更好地理解 Stylus 和相关的 CSS 知识。
