Stylus 基础语法 #

语法风格 #

Stylus 最显著的特点是语法的灵活性。你可以选择最适合自己的语法风格。

缩进语法（推荐） #

最简洁的写法，省略花括号、冒号和分号：

stylus

.container
  width 100%
  padding 20px
  background-color #fff
  
  .item
    color #333
    font-size 14px

编译结果：

css

.container {
  width: 100%;
  padding: 20px;
  background-color: #fff;
}
.container .item {
  color: #333;
  font-size: 14px;
}

CSS 风格 #

保持传统 CSS 语法：

stylus

.container {
  width: 100%;
  padding: 20px;
}

混合风格 #

自由组合两种风格：

stylus

.container {
  width 100px
  padding: 20px;
}

缩进规则 #

基本原则 #

text

父选择器
  属性名 属性值
  
或

父选择器
  子选择器
    属性名 属性值

缩进示例 #

stylus

// 正确示例
.header
  padding 20px
  
  .nav
    margin 0
    
    li
      display inline-block

// 错误示例：缩进不一致
.header
 padding 20px   // 缩进太少
    .nav        // 缩进太多
   margin 0     // 缩进混乱

缩进量 #

推荐使用 2 个空格：

stylus

.element
  property value
  nested-element
    property value

也可以使用 Tab：

stylus

.element
	property value

选择器 #

基本选择器 #

stylus

// 元素选择器
body
  margin 0
  padding 0

// 类选择器
.container
  max-width 1200px

// ID 选择器
#header
  position fixed

// 属性选择器
[type="text"]
  border 1px solid #ccc

// 通配符选择器
*
  box-sizing border-box

嵌套选择器 #

stylus

.nav
  ul
    list-style none
    margin 0
    padding 0
    
  li
    display inline-block
    
    a
      text-decoration none
      color #333

编译结果：

css

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li {
  display: inline-block;
}
.nav li a {
  text-decoration: none;
  color: #333;
}

父选择器引用 (&) #

使用 & 引用父选择器：

stylus

.button
  display inline-block
  padding 10px 20px
  background-color #3498db
  color #fff
  
  &:hover
    background-color darken(#3498db, 10%)
    
  &:active
    background-color darken(#3498db, 20%)
    
  &.disabled
    opacity 0.5
    cursor not-allowed
    
  &--large
    padding 15px 30px
    font-size 18px

编译结果：

css

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
}
.button:hover {
  background-color: #2980b9;
}
.button:active {
  background-color: #1f6dad;
}
.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.button--large {
  padding: 15px 30px;
  font-size: 18px;
}

父选择器高级用法 #

stylus

// 在选择器前添加内容
.header
  .container &
    padding 0 20px

// 编译结果：.container .header { padding: 0 20px; }

// 组合选择器
.form
  &__input
    border 1px solid #ccc
    
  &__button
    background-color #3498db
    
  &--inline
    display flex
    
    & ^[0]__input
      flex 1

// 编译结果：
// .form__input { border: 1px solid #ccc; }
// .form__button { background-color: #3498db; }
// .form--inline { display: flex; }
// .form--inline .form__input { flex: 1; }

选择器组合 #

stylus

// 逗号分隔
h1, h2, h3
  margin-top 0
  font-weight bold

// 多行写法
h1
, h2
, h3
  margin-top 0

// 嵌套中的组合
.article
  h1, h2, h3
    margin-bottom 20px

属性 #

基本写法 #

stylus

.element
  width 100px
  height 100px
  margin 10px
  padding 20px
  background-color #fff
  border 1px solid #ccc

属性值 #

stylus

.box
  // 数值
  width 100px
  height 50%
  
  // 颜色
  color #333
  background-color rgb(255, 0, 0)
  border-color rgba(0, 0, 0, 0.1)
  
  // 字符串
  font-family Helvetica, sans-serif
  content "Hello"
  
  // 计算
  width 100px + 50px
  margin 10px * 2

属性简写 #

stylus

// margin/padding 简写
.element
  margin 10px           // 四边相同
  margin 10px 20px      // 上下 左右
  margin 10px 20px 30px // 上 左右 下
  margin 10px 20px 30px 40px // 上 右 下 左

// font 简写
.text
  font 14px/1.5 Helvetica, sans-serif

// border 简写
.box
  border 1px solid #ccc

// background 简写
.hero
  background #000 url('bg.jpg') no-repeat center/cover

属性访问 #

使用 @ 访问已定义的属性值：

stylus

.element
  width 100px
  height @width  // 100px
  
  padding 10px
  margin @padding * 2  // 20px

注释 #

单行注释 #

使用 //，不会输出到 CSS：

stylus

// 这是单行注释，不会出现在 CSS 中
.element
  color #333  // 行尾注释也不会输出

多行注释 #

使用 /* */，会输出到 CSS：

stylus

/*
 * 这是多行注释
 * 会出现在编译后的 CSS 中
 */
.element
  color #333

编译结果：

css

/*
 * 这是多行注释
 * 会出现在编译后的 CSS 中
 */
.element {
  color: #333;
}

压缩模式下的注释 #

stylus

/*! 
 * 重要注释
 * 即使压缩也会保留
 */
.element
  color #333

空白与格式 #

空行 #

stylus

// 使用空行分隔逻辑块
.header
  position fixed
  top 0
  left 0
  width 100%
  
  // 导航样式
  .nav
    display flex
    
    .nav-item
      margin-right 20px

属性分组 #

stylus

.card
  // 布局
  display flex
  flex-direction column
  width 300px
  
  // 盒模型
  padding 20px
  margin 10px
  border-radius 8px
  
  // 视觉
  background-color #fff
  box-shadow 0 2px 10px rgba(0, 0, 0, 0.1)
  
  // 文字
  color #333
  font-size 14px

特殊语法 #

!important #

stylus

.element
  color #333 !important
  padding 10px !important

属性前缀 #

stylus

.element
  -webkit-transform rotate(45deg)
  -moz-transform rotate(45deg)
  -ms-transform rotate(45deg)
  transform rotate(45deg)

自定义属性 (CSS Variables) #

stylus

:root
  --primary-color #3498db
  --spacing 20px

.element
  color var(--primary-color)
  padding var(--spacing)

语法对比表 #

特性	CSS	Stylus
花括号	必需	可选
冒号	必需	可选
分号	必需	可选
嵌套	不支持	支持
变量	支持 (–)	支持 (=)
注释	`/* */`	`//` 和 `/* */`

最佳实践 #

1. 保持一致的缩进 #

stylus

// 推荐：统一使用 2 空格
.element
  property value
  nested
    property value

2. 合理使用空行 #

stylus

// 推荐：逻辑块之间使用空行
.header
  position fixed
  width 100%
  
  .logo
    float left
    
  .nav
    float right

3. 有意义的注释 #

stylus

// 推荐：解释为什么，而不是做什么
// 使用固定定位确保导航栏始终可见
.header
  position fixed

4. 避免过度嵌套 #

stylus

// 不推荐：嵌套太深
.page
  .content
    .article
      .body
        .paragraph
          color #333

// 推荐：扁平化结构
.article-paragraph
  color #333

下一步 #

掌握基础语法后，继续学习变量了解如何使用变量管理样式值！