stylus - 變量與屬性查找

Stylus

變量

     我們可以指定表達式爲變量，然後在我們的樣式中貫穿使用。

size = 12px
borders = 10px solid #000
p
	font-size size
	border-bottom borders

上述代碼編譯爲：

p {
  font-size: 12px;
  border-bottom: 10px solid #000;
}

屬性查找

     stylus還提供了一些獨特的功能，可以使用@來標識某個屬性，自動的向上冒泡，查找被@標識的這個屬性，如果找不到則爲null。

.blue
	color blue
	.red
		background @color
		color pink
		em
			background @color
			color skyblue

上述代碼編譯爲：

.blue {
  color: #00f;
}
.blue .red {
  background: #00f;
  color: #ffc0cb;
}
.blue .red em {
  background: #ffc0cb;
  color: #87ceeb;
}

<p class="blue">
	blue
	<span class="red">
		red
		<em>
			pink
		</em>
	</span>
</p>

效果示例：