stylus的样式格式书写问题

最新推荐文章于 2025-06-03 09:11:45 发布

原创最新推荐文章于 2025-06-03 09:11:45 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

笔记专栏收录该内容

23 篇文章

订阅专栏

本文介绍了Stylus样式语言的编写规范，包括类名的缩进规则，子类名的位置要求等。通过实例展示了如何正确地编写进步条组件的样式，涉及相对定位、SVG元素的使用、变换属性以及颜色主题的应用。了解这些规范有助于提升Stylus代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

stylus样式要相对类名缩进两个空格;子类名与父元素样式要处于同一级(即子类名不要缩进)
举个栗子

.progress-circle
        position: relative
        width 100%
        height 100%
        svg
          position absolute
          top 40%
          left 50%
          z-index 10
          transform translate(-50%,-50%)
          circle
            position absolute
            stroke-width: 8px
            transform-origin: center
            &.progress-background
              transform: scale(0.9)
              stroke: $color-theme-d
            &.progress-bar
              transform: scale(0.9) rotate(-90deg)
              stroke: $color-theme