AI工具平台 为你提供最新AI工具及常用工具的一站式平台

前端

Stylus

Stylus 是一种动态的 CSS 预处理器，它旨在让开发者能以更简洁、灵活且高效的方式编写 CSS 代码。

链接直达手机查看

Stylus 是一种动态的 CSS 预处理器，它旨在让开发者能以更简洁、灵活且高效的方式编写 CSS 代码。Stylus 具有独特的语法，支持变量、嵌套、混合、函数等编程特性，以下是详细介绍：

主要特性

简洁灵活的语法：Stylus 语法非常灵活，既支持类似 CSS 的传统语法，使用花括号和分号；也支持省略这些符号，采用缩进方式表示代码块，让代码更加简洁易读。

stylus

/* 传统语法 */
body
{
  color: black;
  font-size: 16px;
}

/* 简洁语法 */
body
  color black
  font-size 16px

变量：允许定义变量来存储常用的值，如颜色、字体大小等。变量的使用提高了代码的可维护性，修改一处变量的值，所有引用该变量的地方都会更新。

stylus

primary-color = #007bff
body
  color primary-color

嵌套规则：支持选择器嵌套，使得代码结构与 HTML 文档结构相呼应，便于理解和维护。可以在父选择器中直接嵌套子选择器。

stylus

nav
  ul
    margin 0
    padding 0
    list-style none
  li
    display inline-block
  a
    display block
    padding 6px 12px
    text-decoration none

混合（Mixins）：混合是可复用的样式代码块，可将一组样式封装成一个混合，然后在需要的地方调用。混合还能接收参数，实现更灵活的复用。

stylus

border-radius(radius)
  -webkit-border-radius radius
  -moz-border-radius radius
  border-radius radius

.button
  border-radius(5px)

函数：Stylus 内置了许多实用函数，如颜色处理、数学计算等，同时也支持自定义函数。

stylus

double(n)
  n * 2

.box
  width double(100px)

运算：支持在样式中进行数学运算，可对尺寸、颜色等进行计算。

stylus

base-width = 200px
padding = 10px
.box
  width base-width + 2 * padding

编译方式

Stylus 代码不能直接在浏览器中使用，需要编译成标准的 CSS 代码。常见编译方式如下：

命令行工具：安装 stylus 命令行工具后，在终端执行命令进行编译。

bash

stylus input.styl -o output.css

构建工具集成：可以与 Gulp、Webpack 等构建工具集成，实现自动化编译。以 Gulp 为例：

javascript

const gulp = require('gulp');
const stylus = require('gulp-stylus');

function styles() {
  return gulp.src('src/stylus/*.styl')
    .pipe(stylus())
    .pipe(gulp.dest('dist/css'));
}

exports.styles = styles;