㈠ CSS预处理工具Stylus简介
Stylus是一个高效、动态且富有表现力的CSS预处理器，利用缩进、空格和换行减少输入字符，同时兼容CSS语法。以下是Stylus的使用指南：
安装及使用：
- 全局安装：通过命令行输入`npm install stylus -g`。
- 使用命令行：运行`stylus -w style.styl -o style.css`，其中`-w`监听文件变动并重新编译，`-o`输出CSS文件。
在Vue项目中安装Stylus：
- 手动安装：执行`npm install -D stylus-loader stylus`。
- 使用Vue CLI：在项目创建时选择Stylus预处理器。
Stylus用法：
- 选择器&符号表示父级选择器。
- 属性变量：在属性名前添加@字符，可访问对应的值。
- 函数：定义与混入相同，但能返回值。内置函数包括颜色、文件路径、列表和哈希、单位、数学、字符串、工具等。
- 条件判断：支持if else语句。
- 迭代：使用for/in对表达式进行迭代，格式为`for [, ] in`。
- 导入：支持静态@import CSS和动态导入其他Stylus样式。
- 继承：支持@extend继承。
Stylus提供了简洁、高效的CSS编写方式，能够提高开发效率并提升代码可读性。