目录
一、安装与配置
安装Node.js：
安装Stylus：
配置Webpack：
二、编写Stylus代码
定义变量：
使用变量：
嵌套语法：
混合（Mixins）：
函数：
6.关键字参数:
7.条件表达式:
7.1举例设置屏幕宽度：
7.2除非（Unless）：
7.3后缀条件 ：
官网地址
介绍：
Stylus是一种CSS预处理语言，它允许开发者使用更加强大和富有表现力的方式来写CSS代码。
为啥要用stylus，我们先上代码，看看：
先举例一下Sass和Less：
// Sass 代码
$primary-color: #ff0000;
$secondary-color: #00ff00;body {font-size: 14px;color: $primary-color;p {margin: 10px;padding: 5px;&:hover {background-color: $secondary-color;}}
}.button {background-color: $primary-color;color: #fff;padding: 10px;border-radius: 5px;
}// Less 代码
@primary-color: #ff0000;
@secondary-color: #00ff00;body {font-size: 14px;color: @primary-color;p {margin: 10px;padding: 5px;&:hover {background-color: @secondary-color;}}
}.button {background-color: @primary-color;color: #fff;padding: 10px;border-radius: 5px;
}然后，我们再把我们要讲的Stylus放上来，与less、sass进行一个对比
// Stylus 代码
$primary-color = #ff0000
$secondary-color = #00ff00bodyfont-size 14pxcolor $primary-colorpmargin 10pxpadding 5px&:hoverbackground-color $secondary-color.buttonbackground-color $primary-colorcolor #fffpadding 10pxborder-radius 5px从上面的代码对比可以看出，Stylus的代码更加简洁，省略了大量的标点符号（冒号、分号、大括号、逗号），代码不仅减少了代码的冗余，还提高了代码的可读性和可维护性。这就是为啥可以选择他的原因。
一、安装与配置
-
安装Node.js：
- Stylus是基于Node.js社区产生的，因此在使用Stylus前，需确保计算机上已经安装了Node.js。
-
安装Stylus：
- 通过Node.js的包管理器npm来全局安装Stylus。在命令行中输入
npm install stylus -g，即可完成Stylus的安装。npm install stylus -g - 如果是在项目中使用，可以在项目的根目录下运行
npm install stylus stylus-loader --save-dev来安装Stylus和stylus-loader（用于webpack打包）。npm install stylus stylus-loader --save-dev
- 通过Node.js的包管理器npm来全局安装Stylus。在命令行中输入
-
配置Webpack：
- 如果项目是使用Webpack构建的，需要确保
webpack.config.js文件中对Stylus进行了正确的配置。const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 用于将 CSS 提取到单独的文件中（可选）module.exports = {entry: './src/index.js', // 你的入口文件output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},module: {rules: [{test: /\.styl(us)?$/, // 匹配 .styl 或 .stylus 文件use: [MiniCssExtractPlugin.loader, // 如果你想要将 CSS 提取到单独的文件中（可选）'css-loader', // 处理 CSS 文件，使其可以被 JavaScript 导入'stylus-loader', // 处理 Stylus 文件，将其编译为 CSS],},// 其他 loader 配置...],},plugins: [new MiniCssExtractPlugin({filename: 'styles.css', // 提取出的 CSS 文件名}),// 其他插件配置...],// 其他 Webpack 配置... }; - 使用VueCLI创建的项目，通常这部分配置已经设置好了。
- 如果项目是使用Webpack构建的，需要确保
二、编写Stylus代码
Stylus默认使用.styl作为文件扩展名。以下是一些基本的语法示例：
<template><div class="container"><h1 class="title">Hello, Stylus!</h1></div>
</template><script>
export default {name: 'Home'
}
</script><style lang="stylus">
$theme-color = #42b983.containerpadding 20px.titlecolor $theme-colorfont-size 24px&:hovertext-decoration underline
</style>-
定义变量：
- 在Stylus中，可以使用变量来存储常用的CSS属性值，以便在需要时重复使用。
$theme-color = #42b983
- 在Stylus中，可以使用变量来存储常用的CSS属性值，以便在需要时重复使用。
-
使用变量：
- 定义变量后，可以在CSS规则中引用这些变量。
.title color $theme-color
- 定义变量后，可以在CSS规则中引用这些变量。
-
嵌套语法：
- Stylus支持嵌套语法，这使得在定义复杂选择器时更加直观和方便。
.containerpadding 20px.titlecolor $theme-colorfont-size 24px&:hovertext-decoration underline
- Stylus支持嵌套语法，这使得在定义复杂选择器时更加直观和方便。
-
混合（Mixins）：
- 混合允许你定义一组CSS规则，并在多个地方重复使用它们。
这里是一个简化和优化的例子， 展示了如何在 CSS 中设置 border-radius，同时考虑旧浏览器的兼容性：border-radius(n)border-radius: n-webkit-border-radius: n -moz-border-radius: nbuttonborder-radius(5px)
- 混合允许你定义一组CSS规则，并在多个地方重复使用它们。
-
函数：
- Stylus支持函数，可以执行一些复杂的计算或逻辑操作。
element background-color: lighten(#f00,10%)lighten 函数通常用于增加颜色的亮度。 这个函数接受两个参数：第一个参数是原始颜色；第二个参数是亮度的增加量，通常以百分比表示。
- Stylus支持函数，可以执行一些复杂的计算或逻辑操作。
6.关键字参数:
以下示例在功能上是等价的。 然而，我们可以 在参数列表中的任何位置放置关键字参数。 未 设置关键字的参数将被用来填充其余尚未填充的参数。
body {color: rgba(255, 200, 100, 0.5);color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5);color: rgba(alpha: 0.5, blue: 100, red: 255, 200);color: rgba(alpha: 0.5, blue: 100, 255, 200);}
转换为：
body {color: rgba(255,200,100,0.5);color: rgba(255,200,100,0.5);color: rgba(255,200,100,0.5);color: rgba(255,200,100,0.5);}
若要查看函数或混合（mixin）所能接受的参数，请使用 p() 函数：
p(rgba)
输出：
inspect: rgba(red, green, blue, alpha)7.条件表达式:
Stylus的条件表达式使用if、else if和else关键字来构建，和js的if语句差不多啦
7.1举例设置屏幕宽度：
// 定义一个变量来表示屏幕宽度
screen-width = 1200px// 使用条件表达式来设置不同的CSS属性
if (screen-width >= 1000px) {.container {max-width: 1000px;}
} else {.container {max-width: 90%;}
}7.2除非（Unless）：
除了基本的if、else if和else关键字外，Stylus还支持unless关键字，其用法与if相反。unless关键字用于在条件表达式为假时执行代码块
unless (条件表达式) {// 条件表达式为假时执行的代码块
}7.3后缀条件 ：
Stylus还支持后缀条件，这意味着if和unless可以当作操作符使用。当右边表达式为真时，执行左边的操作对象。这种语法特别适用于单行语句，如@import、@charset等。
// 定义一个变量来表示是否禁用内边距覆盖
disable-padding-override = false// 使用后缀条件来设置不同的CSS属性
body {padding: 10px 20px unless (disable-padding-override);margin: 0 unless (disable-padding-override == false);
} 上面这个例子中，如果disable-padding-override变量的值为false，则body元素将具有padding属性；否则，padding属性将被忽略，而margin属性将被设置为0。
官网地址
下面是他的官网地址，如需要详细了解点击下方跳转：
点击跳转-->Stylus官网
