💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。

  • 推荐:「stormsha的主页」👈,持续学习,不断总结,共同进步,为了踏实,做好当下事儿~
  • 专栏导航
  • Python面试合集系列:Python面试题合集,剑指大厂
  • GO基础学习笔记系列:记录博主学习GO语言的笔记,该笔记专栏尽量写的试用所有入门GO语言的初学者
  • 数据库系列:详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
  • 运维系列:总结好用的命令,高效开发
  • 算法与数据结构系列:总结数据结构和算法,不同类型针对性训练,提升编程思维

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨


💖The Start💖点点关注,收藏不迷路💖



📒文章目录

  • 1、Stylus简介
  • 2、Stylus安装与配置
  • 2.1、安装
  • 2.2、配置
  • 3、Stylus基本语法
  • 3.1、变量
  • 3.2、嵌套
  • 3.3、混合(Mixins)
  • 3.4、函数与运算符
  • 3.5、条件语句与循环
  • 4、编译 Stylus 代码
  • 5、Stylus与其他CSS预处理器比较
  • 5.1、Sass (SCSS)
  • 5.2、Less
  • 6、总结



1、Stylus简介

Stylus 是一款功能强大且灵活的 CSS 预处理器,它允许开发者使用简洁、富有表现力的语法编写 CSS 样式,旨在提高 CSS 的可维护性和开发效率。Stylus 提供诸如变量、嵌套、混合(mixins)、函数、运算符、条件语句、循环等高级特性,使得 CSS 代码更加模块化、易于复用和扩展。其主要特点包括:

  • 简洁的语法:Stylus 允许省略不必要的分号和花括号,使代码更为清爽。其语法结构类似于 Python 和 Ruby,强调自然的缩进以代替严格的括号。
  • 动态性:Stylus 支持实时编译,能够处理动态值和表达式,使得样式表具备一定的编程能力。
  • 高度可定制:Stylus 具有丰富的插件系统和强大的内置函数库,可以轻松扩展以满足特定项目需求。同时,它也兼容其他预处理器(如 Less、Sass)的部分语法,便于迁移或混编。

2、Stylus安装与配置

2.1、安装

在 Node.js 环境下,通过 npm (Node Package Manager) 安装 Stylus:

npm install stylus --save-dev

对于 Vue.js 或其他支持 Webpack 的项目,还需要安装 stylus-loader 以在构建过程中处理 Stylus 文件:

npm install stylus-loader --save-dev

2.2、配置

在 Webpack 或其他构建工具(如 Gulp、Grunt)中,需要相应地配置加载器以处理 .styl 文件。以下是一个在 Webpack 中的基本配置示例:

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
          'style-loader', // 将 CSS 插入到 DOM 中
          'css-loader', // 处理 CSS 内的 @import 和 url()
          'stylus-loader' // 编译 Stylus 文件
        ]
      }
    ]
  }
  // ...
};

3、Stylus基本语法

3.1、变量

在 Stylus 中,使用 = 定义变量:

mainColor = #333
bgColor = #fff

body
  color: mainColor
  background: bgColor

3.2、嵌套

Stylus 支持自然的嵌套结构,使得选择器之间的关系更为清晰:

header
  background: $bgColor

  .logo
    width: 200px
    height: auto

3.3、混合(Mixins)

Mixins 允许复用一组样式:

border-radius()
  -webkit-border-radius: arguments[0]
  border-radius: arguments[0]

button
  border-radius: 5px

3.4、函数与运算符

Stylus 提供了多种内置函数和运算符,如颜色操作、数学计算等:

darken(color, amount)
  return mix(black, color, amount)

light-color = darken(#f00, 20%)

// 使用运算符
padding = 10px + 5px

div
  padding: padding
  background-color: light-color

3.5、条件语句与循环

Stylus 支持条件判断和循环结构,用于编写更复杂的逻辑:

for i in (1..5)
  .item-{i}
    width: (i * 20%) + px

if $isMobile
  body
    font-size: 16px
else
  body
    font-size: 18px

4、编译 Stylus 代码

Stylus 提供命令行工具用于编译 .styl 文件为 .css 文件。基本用法如下:

stylus input.styl -o output.css

或者,如果你希望压缩生成的 CSS:

stylus --compress input.styl -o output.min.css

在实际项目中,通常会结合构建工具自动进行编译。

5、Stylus与其他CSS预处理器比较

5.1、Sass (SCSS)

  • 语法:Sass 提供两种语法形式:SCSS(类似 CSS,使用花括号和分号)和 indented syntax(类似 Stylus,使用缩进来表示层级)。Stylus 的语法更为自由,但 SCSS 可能对习惯传统 CSS 开发者更友好。
  • 变量:两者都支持变量,但 Sass 使用 $ 符号作为前缀。
  • 嵌套:两者都支持嵌套规则,但在 Sass 中,& 符号用于引用父选择器。
  • 混合:Sass 也提供 mixins,但参数传递和使用略有不同。
  • 社区与生态:Sass 社区更庞大,插件和资源相对丰富;Stylus 虽然小众,但具有高度可定制性。

5.2、Less

  • 语法:Less 的语法与 CSS 更接近,但也支持变量、嵌套等特性。
  • 变量:Less 使用 @ 符号定义变量。
  • 混合:Less 的 mixins 功能与 Sass 类似,但语法细节有差异。
  • 生态:Less 社区较为成熟,但相对于 Sass,近年来发展势头相对较弱。

6、总结

Stylus 以其独特的简洁语法和高度灵活性吸引了一部分开发者。虽然在社区规模和第三方资源方面可能不及 Sass,但它为那些追求代码风格自由度和定制化需求的项目提供了另一种选择。选择哪一种预处理器往往取决于团队偏好、项目需求以及对生态系统依赖程度。


❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏、分享下吧,非常感谢!👍 👍 👍

🔥🔥🔥道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙


💖The End💖点点关注,收藏不迷路💖