stylus - 選擇器

Stylus

選擇器

    在stylus中選擇某個元素，是通過縮進的方式來控制的。縮進在stylus中是尤爲重要的。

從選擇一個標籤開始

div
	width 100px
	height 100px
	background pink

上述代碼編譯爲：

div {
	width: 100px;
	height: 100px;
	background: pink;
}

羣組選擇器 （官方叫做規則集）

ul,ol
	list-style none

也可以省略逗號，如下：

ul
li
	list-style none

上述代碼編譯爲：

ul,ol {
	list-style: none;
}

子選擇器

div
	width 100px
	height 100px
	>a
		color red

上述代碼編譯爲：

div {
  width: 100px;
  height: 100px;
}
div >a {
  color: #f00;
}

父級引用

.fade
	opacity 1
	&.active
		opacity .5
ul
	li
		&:nth-child(2)
			color red
		&::after
			content ""
		&:nth-of-type
			color blue

上述代碼編譯爲：

.fade {
  opacity: 1;
}
.fade.active {
  opacity: 0.5;
}
ul li:nth-child(2) {
  color: #f00;
}
ul li::after {
  content: "";
}
ul li:nth-of-type {
  color: #00f;
}