语言►Stylus

什么是Stylus

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/30/%E4%BB%80%E4%B9%88%E6%98%AFStylus/

摘要

本文主要讲述了：

  1. 什么是 Stylus
  2. 文件扩展名
  3. 安装
  4. 示例

正文

什么是 Stylus

Stylus 在 CSS 的基础上扩充了大量新特性，Stylus 可以编译为 CSS。

Stylus 的初始版本发布于 2010 年。

Stylus 是 CSS 的真超集。

Stylus 是在 Sass 和 Less 的影响下诞生的。

文件扩展名

注意：Stylus 的文件扩展名是.styl而不是.stylus。

安装

1
2
3
#!/usr/bin/env bash

npm install --save-dev stylus

示例

源文件：

foo.styl

1
2
3
4
5
6
7
8
font-size = 14px

body
  font font-size Arial, sans-serif

.example {
  font-size: 18px;
}

编译：

1
2
3
#!/usr/bin/env bash

npx stylus foo.styl

输出：

1
2
3
4
5
6
body {
  font: 14px Arial, sans-serif;
}
.example {
  font-size: 18px;
}

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/30/%E4%BB%80%E4%B9%88%E6%98%AFStylus/

本文对你有帮助？请支持我

支付宝
微信