stylus的使用和基础知识

安装stylus

npm install stylus stylus-loader -s

stylus是主流的css预编译器

1. Less
2. Sass

Stylus使用方法

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

</style>

语法

中文文档：www.zhangxinxu.com/jq/stylus/

语法结构：

完全通过缩进控制，不需要大括号和分号，冒号可选。

.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