预处理器Stylus的介绍及使用，并同Less、Sass进行对比（简单介绍）

目录

一、安装与配置

安装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的代码更加简洁，省略了大量的标点符号（冒号、分号、大括号、逗号），代码不仅减少了代码的冗余，还提高了代码的可读性和可维护性。这就是为啥可以选择他的原因。

一、安装与配置

1. 安装Node.js：

   • Stylus是基于Node.js社区产生的，因此在使用Stylus前，需确保计算机上已经安装了Node.js。

2. 安装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

3. 配置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创建的项目，通常这部分配置已经设置好了。

二、编写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>

1. 定义变量：

   • 在Stylus中，可以使用变量来存储常用的CSS属性值，以便在需要时重复使用。

     $theme-color = #42b983

2. 使用变量：

   • 定义变量后，可以在CSS规则中引用这些变量。

     .title color $theme-color

3. 嵌套语法：

   • Stylus支持嵌套语法，这使得在定义复杂选择器时更加直观和方便。

     .containerpadding 20px.titlecolor $theme-colorfont-size 24px&:hovertext-decoration underline

4. 混合（Mixins）：

   • 混合允许你定义一组CSS规则，并在多个地方重复使用它们。

     这里是一个简化和优化的例子，
     展示了如何在 CSS 中设置 border-radius，同时考虑旧浏览器的兼容性：border-radius(n)border-radius: n-webkit-border-radius: n   -moz-border-radius: nbuttonborder-radius(5px)

5. 函数：

   • Stylus支持函数，可以执行一些复杂的计算或逻辑操作。

     element background-color: lighten(#f00,10%)lighten 函数通常用于增加颜色的亮度。
     这个函数接受两个参数：第一个参数是原始颜色；第二个参数是亮度的增加量，通常以百分比表示。

     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官网