跳到主要内容

CSS Stylus 基础

介绍​

CSS 预处理器是一种工具，它扩展了原生 CSS 的功能，提供了变量、嵌套、混合（Mixins）、函数等高级特性，使 CSS 代码更易于维护和扩展。Stylus 是其中一种流行的 CSS 预处理器，以其简洁的语法和强大的功能而闻名。

与 Sass 和 LESS 相比，Stylus 的语法更加灵活，甚至可以省略大括号 {} 和分号 ;，这使得代码更加简洁。本文将带你从零开始学习 Stylus 的基础知识。

安装 Stylus​

在开始编写 Stylus 代码之前，你需要先安装 Stylus。可以通过 npm（Node.js 包管理器）来安装：

bash
npm install stylus -g

安装完成后，你可以使用以下命令将 .styl 文件编译为 .css 文件：

bash
stylus style.styl -o style.css

基础语法​

1. 变量​

Stylus 允许你使用变量来存储颜色、字体、尺寸等值。变量以 $ 开头，但也可以省略。

stylus
primary-color = #3498db
font-size = 14px

body
  color primary-color
  font-size font-size

编译后的 CSS：

css
body {
  color: #3498db;
  font-size: 14px;
}
提示

变量名可以是任何有效的标识符，建议使用有意义的名称。

2. 嵌套​

Stylus 支持嵌套规则，这使得代码结构更加清晰。

stylus
nav
  ul
    margin 0
    padding 0
    list-style none

    li
      display inline-block

      a
        text-decoration none
        color #333

编译后的 CSS：

css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}
警告

过度嵌套可能会导致 CSS 选择器过于复杂，影响性能，建议适度使用。

3. 混合（Mixins）​

Mixins 是一种将一组 CSS 属性打包并重用的方式。你可以将 Mixins 看作是一个函数。

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

button
  border-radius(5px)

编译后的 CSS：

css
button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
备注

Mixins 可以接受参数，这使得它们更加灵活。

4. 函数​

Stylus 支持自定义函数，可以用于计算值或生成复杂的 CSS。

stylus
add(a, b)
  a + b

body
  padding add(10px, 20px)

编译后的 CSS：

css
body {
  padding: 30px;
}

5. 条件语句​

Stylus 支持条件语句，可以根据条件动态生成 CSS。

stylus
theme = dark

body
  if theme == dark
    background-color #333
    color #fff
  else
    background-color #fff
    color #333

编译后的 CSS：

css
body {
  background-color: #333;
  color: #fff;
}

实际案例​

假设你正在开发一个按钮组件，可以使用 Stylus 来简化样式代码：

stylus
button-style(bg-color, text-color)
  background-color bg-color
  color text-color
  padding 10px 20px
  border none
  border-radius 5px
  cursor pointer

  &:hover
    opacity 0.8

.button-primary
  button-style(#3498db, #fff)

.button-secondary
  button-style(#2ecc71, #fff)

编译后的 CSS：

css
.button-primary {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button-primary:hover {
  opacity: 0.8;
}

.button-secondary {
  background-color: #2ecc71;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button-secondary:hover {
  opacity: 0.8;
}

总结​

Stylus 是一种功能强大且灵活的 CSS 预处理器，通过变量、嵌套、Mixins、函数和条件语句等特性，可以显著提高 CSS 的开发效率和可维护性。本文介绍了 Stylus 的基础语法和实际应用场景，帮助你快速上手。

附加资源与练习​

  1. 官方文档: Stylus 官方文档 是学习 Stylus 的最佳资源。
  2. 练习: 尝试使用 Stylus 重构你的 CSS 项目，体验其简洁和强大。
  3. 扩展阅读: 了解其他 CSS 预处理器，如 Sass 和 LESS，比较它们的异同。

Happy coding! 🎉