stylus的使用和基礎知識

安裝stylus

npm install stylus stylus-loader -s

stylus是主流的css預編譯器

1. Less
2. Sass
3. Stylus
   使用方法

<style lang="stylus" rel="stylessheet/stylus">

</style>

語法

中文文檔

語法結構：

完全通過縮進控制，不需要 大括號和 分號，冒號可選。

.tab
	display:flex
	height 40px
	line-height 40px
	.tab-item
		width 0
		flex 1
		& > a
			display block
			text-decoration none
			color:rgb(240,20,20)
			&.active
				color:rgb(77.85.93)

父級引用

使用字符&指向父選擇器

textarea
input
	color #a7a7a7
	&:hover
		color #000
	

等同

textarea,
input{
	color:#a7a7a7
}
textarea:hover,
input:hover{
	color:#000
}

變量

定義變量：name=value 如：mainColor=#090909
引用變量：name 如：color mainColor
變量名可以沒有前綴要求，但最好以$開頭

mainColor=#090909
$borderStyle=dotted
body
	color mainColor
	border 1px $borderStyle mainColor

混合（Mixins）

預處理器中的函數
函數參數可以指定默認值
某段css樣式要用到多個元素上只有其中的1，2個樣式值有變化

error(borderWidth=2px){
	border:borderWidth soild #f00;
	color:#f00;
}
.generic-error{
	padding:20px;
	margin:4px;
	error();/*調用error mixins*/
}
.login-error{
	left:12px;
	position:absolute;
	top:20px;
	error(5px);/*調用error mixins,將參數$borderWidth的值指定爲5px*/
}

導入(import)

通過@import引入其它樣式文件

@import "reset.css";
@import "file.{type}";
p{
	background:#090909
}

$green = #02a774; $yellow = #F5A100; $bc = #e4e4e4;
//一 像 素 下 邊 框 
bottom-border-1px($color)
	position relative
	border none
	&:after
		content ''
		position absolute
		left 0
		bottom 0
		width 100% height 1px
		background-color $color
		transform scaleY(0.5)
//一 像 素 上 邊 框
top-border-1px($color)
	position relative
	&::before
		content ''
		position absolute
		z-index 200
		left 0
		top 0
		width 100%
		height 1px
		background-color $color
// 根 據 像 素 比 縮 放 1px像 素 邊 框 
@media only screen and (-webkit-device-pixel-ratio: 2 )
	.border-1px
		&::before
			transform scaleY(.5)
@media only screen and (-webkit-device-pixel-ratio: 3 )
	.border-1px
		&::before
			transform scaleY(.333333)
// 根 據 像 素 比 來 使 用2x圖3x圖
bg-image($url)
	background-image: url($url + "@2x.png")
	@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
		background-image: url($url + "@3x.png")
// 清 除 浮 動 
clearFix()
	*zoom 1
	&::after
		content ''
		display block
		clear both