Slim框架中如何使用含正斜杠的类名？比如.w-1/3

算力阿峰

2026-5-20

解决Slim中.w-1/3这类带斜杠类名的生效问题

我之前也踩过这个坑！Slim对类名里的特殊字符（比如斜杠）处理确实有点“固执”，常规CSS的转义方法在这里行不通，不过有几个简单有效的解决办法：

使用属性括号语法（最推荐）
放弃Slim的短点语法（.w-1/3），改用显式的class属性并放在括号里，这样斜杠就能被正确解析，不需要任何转义：
```
div(class="w-1/3 bg-gray-100 p-2")
  | 这个元素会正确应用1/3宽度的样式
```
原理是Slim在解析括号内的属性值时，会把整个字符串当作类名内容，不会把斜杠当成语法分割符。
避免错误的转义方式
你之前尝试的w-1\/3之所以无效，是因为Slim会把转义符\当成类名的一部分，最终生成的HTML会是class="w-1\/3"，而浏览器无法识别这个带转义符的类名，自然不会生效。
如果是Rails+Tailwind的场景
还可以借助Tailwind的配置别名，在tailwind.config.js里给这类带斜杠的类名设置别名，比如：
```
module.exports = {
  theme: {
    extend: {
      width: {
        'third': '33.333333%',
      }
    }
  }
}
```
之后在Slim里直接写.w-third就可以了，这种方法适合不想频繁写括号的场景。