CSS Stylus基础

CSS Stylus基础

Stylus 是一种流行的 CSS预处理器，它通过引入变量、嵌套规则、混合（Mixins）、函数等高级特性，扩展了原生CSS的功能。Stylus语法灵活，支持省略花括号和分号，使代码更简洁易读。本教程将介绍Stylus的基础语法、核心功能及实际应用场景，适合初学者和需要快速掌握Stylus的程序员。

简介

Stylus由Node.js编写，与Sass和Less类似，但语法更加自由。它允许开发者以更高效的方式编写CSS，并通过编译生成标准的CSS文件。Stylus的主要特点包括：

• **变量**：存储可复用的值（如颜色、尺寸）。
• **嵌套**：简化选择器的层级结构。
• **混合（Mixins）**：定义可重用的代码块。
• **函数**：支持逻辑运算和动态样式生成。

安装与使用

安装

通过npm安装Stylus：

npm install stylus -g

编译Stylus文件

将.styl文件编译为CSS：

stylus input.styl -o output.css

基础语法

变量

变量用于存储值，通过=或:赋值：

primary-color = #3498db
body
  background: primary-color

编译后：

body {
  background: #3498db;
}

嵌套

嵌套规则简化了层级选择器的书写：

nav
  ul
    margin: 0
    li
      display: inline-block

编译后：

nav ul {
  margin: 0;
}
nav ul li {
  display: inline-block;
}

混合（Mixins）

Mixins是可复用的代码块，类似函数：

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

button
  border-radius(5px)

编译后：

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

函数

Stylus支持自定义函数：

add(a, b)
  a + b

width = add(10px, 5px)

编译后：

width: 15px;

实际案例

响应式布局

使用Stylus变量和混合实现响应式设计：

breakpoint = 768px

responsive-mixin()
  @media (min-width: breakpoint)
    {block}

.container
  width: 100%
  +responsive-mixin()
    width: 750px

编译后：

.container {
  width: 100%;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

主题切换

通过变量快速切换主题颜色：

theme = {
  primary: #3498db,
  secondary: #2ecc71
}

.button
  background: theme.primary
  color: white

进阶特性

条件语句

使用if和else实现逻辑控制：

dark-mode = true

body
  if dark-mode
    background: #333
    color: white
  else
    background: white
    color: #333

循环

遍历生成样式：

for i in 1..3
  .col-{i}
    width: (100% / i)

编译后：

.col-1 {
  width: 100%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 33.333333333333336%;
}

总结

Stylus通过简洁的语法和强大的功能，显著提升了CSS的开发效率。掌握变量、嵌套、混合和函数等特性后，开发者可以更灵活地编写可维护的样式代码。结合实际案例（如响应式设计和主题切换），Stylus能适应复杂的项目需求。

graph TD A[Stylus基础] --> B[变量] A --> C[嵌套] A --> D[混合] A --> E[函数] B --> F[存储颜色/尺寸] C --> G[简化层级] D --> H[复用代码块] E --> I[动态计算]

下一步建议学习CSS预处理器的高级特性或Stylus与构建工具集成。