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

发布于：2024-12-18 ⋅ 阅读:(166) ⋅ 点赞:(0)

目录

一、安装与配置

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

一、安装与配置

  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

.container
  padding 20px
  
.title
  color $theme-color
  font-size 24px
  &:hover
    text-decoration underline
</style>

  1. 定义变量：

    • 在Stylus中，可以使用变量来存储常用的CSS属性值，以便在需要时重复使用。 
      $theme-color = #42b983

  2. 使用变量：

    • 定义变量后，可以在CSS规则中引用这些变量。 
      .title color $theme-color

  3. 嵌套语法：

    • Stylus支持嵌套语法，这使得在定义复杂选择器时更加直观和方便。 
      .container
  padding 20px
  .title
    color $theme-color
    font-size 24px
    &:hover
      text-decoration underline

  4. 混合（Mixins）：

    • 混合允许你定义一组CSS规则，并在多个地方重复使用它们。 
      这里是一个简化和优化的例子，
展示了如何在 CSS 中设置 border-radius，同时考虑旧浏览器的兼容性：

border-radius(n)
  border-radius: n
  -webkit-border-radius: n   
  -moz-border-radius: n

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

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布