Stylus基础入门使用方法总结_spartanstylus-CSDN博客

本文链接：https://blog.csdn.net/chenwt_gentle/article/details/137824880

本文介绍了Stylus，一个强大的CSS预处理器，它支持类似JavaScript的语法，提供变量、混合、条件语句、循环等功能。文章详细讲解了如何安装Stylus，编写Stylus代码，编译文件，以及如何在HTML中使用编译后的CSS。此外，还概述了Stylus的高级特性，包括继承、条件语句、循环、操作符和函数。Stylus通过提高开发效率和代码可维护性，成为前端开发的有力工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Stylus 是一个强大的 CSS 预处理器，它支持CSS和JavaScript的所有功能。它使用类似 JavaScript 的语法来编写样式，然后编译成普通的 CSS 代码。Stylus 允许开发者们以更简洁和强大的方式编写样式表，它具有变量、混合（mixins）、操作和函数等功能。

1、安装 Stylus

首先，确保你已经安装了 Node.js。然后通过 npm 来安装，在命令行中运行以下命令：

npm install stylus -g

2、编写 Stylus 代码

创建一个 .styl 文件，例如 styles.styl。可以在这个文件中，编写 Stylus 代码。Stylus 允许使用缩进、变量、函数和混合等特性来编写更简洁、更易于维护的样式：

// styles.styl  
  
// 定义一个变量  
$primary-color = #333  
  
// 使用变量  
body  
  color $primary-color  
  background-color white  
  
// 定义一个混合（mixin）  
border-radius(r)  
  -webkit-border-radius r  
  -moz-border-radius r  
  -ms-border-radius r  
  border-radius r  
  
// 使用混合  
.button  
  border-radius(5px)  
  background-color $primary-color  
  color white  
  padding 10px 20px  
  text-align center
  
// 使用函数
px(val)
  unit(val, 'px')

// 应用函数
.container
  width (px(960))

3、编译 Stylus 文件

在 Node.js 环境中，可以使用 Stylus 提供的 API 来编译 .styl 文件为 .css 文件：

const stylus = require('stylus');

// 编译 Stylus 文件
stylus.render('body { background-color: #f00; color: #00f; }', function(err, css) {
  if (err) throw err;
  console.log(css);
});

或者编译文件：

stylus.render('styles.styl', { paths: ['node_modules/stylus/lib/stylus'] }, function(err, css) {
  if (err) throw err;
  console.log(css);
});

命令行工具，Stylus 也提供了命令行工具，你可以使用它来编译 Stylus 文件。

stylus styles.styl -o css/

这将会把 styles.styl 编译成 css/styles.css。-o 参数用于指定输出文件的名称。

4、进阶使用

Stylus 还有许多高级功能，如继承、条件语句、循环等：

继承（Inheritance）

在 Stylus 中，继承允许创建一个样式集，然后在其他样式集上扩展它。这类似于 CSS 中的 @extend 功能，但更加灵活。

// 定义基础样式
.base
  font-size 14px
  line-height 1.5

// 继承 .base 并添加额外样式
.inherited = .base
  color red

// 使用继承
p
  +inherited

条件语句（Conditionals）

Stylus 支持使用 if else 关键字定义条件语句，可以根据条件来应用不同的样式规则。

// 条件判断
is-dark-theme = true

// 根据条件应用样式
body
  if is-dark-theme
    background-color #333
    color #fff
  else
    background-color #fff
    color #000

循环（Loops）

Stylus 支持使用for关键字定义循环来重复样式规则，这在创建一系列相似的样式时非常有用。

// 循环创建多个颜色样式
for i in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
  .color-{i}
    background-color lighten(red, i * 10%)

// 使用循环生成的样式
div
  &.color-1 { background-color: lighten(red, 10%); }
  &.color-2 { background-color: lighten(red, 20%); }
  // ... 以此类推

操作符和函数

Stylus 提供了丰富的操作符和内置函数，可以让开发者进行复杂的样式计算和处理。

// 使用操作符
body
  margin 10px auto

// 使用函数
h1
  font-size 2em // 放大当前字体大小
  color fade-out(red, 0.5) // 使颜色半透明

导入（Imports）

可以在 Stylus 中使用import关键字导入其他 Stylus 文件或 CSS 文件。

// 导入 Stylus 文件
@import 'mixins.styl'

// 导入 CSS 文件
@import 'normalize.css'

源码注释（Line Comments）

// 这是一个注释，不会出现在最终的 CSS 文件中
body
  color #000 // 这行注释也一样

错误处理（Error Handling）

Stylus使用try catch关键字提供了错误处理机制，可以帮助开发者调试和排查问题。

// 尝试执行一个可能出错的操作
try
  color = hsl(360, 100%, 50%)
catch e
  color = red // 如果出错，使用备用颜色

5、在 HTML 中使用编译后的 CSS

在HTML 文件中，通过标签引入编译后的 CSS 文件：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Stylus Example</title>  
  <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  <div class="button">Click Me</div>  
</body>  
</html>