stylus预处理样式

最新推荐文章于 2024-05-29 23:17:16 发布

原创最新推荐文章于 2024-05-29 23:17:16 发布 · 741 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了Stylus样式语言的特性与语法，包括变量、嵌套、混合和继承等高级功能，展示了其在提高CSS编写效率和代码复用方面的优势。

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

Stylus 支持的语法要多样性一点，它默认使用 .styl 的文件扩展名，下面是 Stylus 支持的语法

h1 {
  color: #0982C1;
}
  
/* omit brackets */
h1
  color: #0982C1;
  
/* omit colons and semi-colons */
h1
  color #0982C1

Stylus 对变量名没有任何限定，你可以是 $ 开始，也可以是任意的字符，而且与变量值之间可以用冒号、空格隔开，需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量，但其对应的值并不会赋予该变量，换句话说，在 Stylus 的变量名不要用 @ 开头

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
  
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

嵌套

section {
  margin: 10px;
  
  nav {
    height: 25px;
  
    a {
      color: #0982C1;
  
      &:hover {
        text-decoration: underline;
      }
    }
  }
}


error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
  
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}

继承

当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法

.block {
  margin: 10px 5px;
  padding: 2px;
}
  
p {
  @extend .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}