saas less stylus语法区别

css预处理器是为了给css增加一些编程上的特性，使得编写css的时候更方便、简介、直观。在css中能使用变量、嵌套、混合等等

语法

1、变量

// .less
@color: #fff;
// .scss
$color: #fff;
// .styl
color =  #fff

2、嵌套

// .less .scss .styl 都支持嵌套
.div {
	li {
		&:hover {
		
		}
		&-txt {
			color: red;
		}
	}
}

3、运算符

// .less .scss .styl 都支持运算符
.div {
	width: (100px/2);
	height: 30px + 20px;
	padding: 2 * 3px;
}

4、继承

.txt {
	color: red;
	font-size: 12px;
}
// .less
.div {
	.txt ;
}
// .scss .styl
.div {
	@extend .txt ;
}

5、混入Mixins

// .less
.border(@borderWidth: 3px) {
	border: @borderWidth solid red;
}

.has {
	.border(5px);
}
// .scss
@mixin border($borderWidth: 3px) {
	border: $borderWidth solid red;
}

.has {
	@include border()
}
// .styl
border(borderWidth = 3px) {
	border: borderWidth solid red;
}

.has {
	border(5px);
}

6、@if @else if @else判断

// .scss
$width: 10;
div {
	@if $width == 10 {
		color: #fff;
	} @else if $width == 11 {
		color: red;
	} @else {
		color: blue;
	}
 }

7、循环

// .scss
/**
 * for循环
 * @for $item from <start> to <end>
 * @for $item from <start> through <end>
 **/
 @for $item from 1 to 5 {
 	.border-#{$item} {
 		border: #{$item}px solid red;
	}
}

/**
* @while 循环
**/
$total: 10;
@while $total > 0 {
	.border-#{$total } {
 		border: #{$total }px solid red;
	}
	$total: $total - 2
}

/**
* @each in 循环
**/
$color-list: red, blue, #ccc, yellow;
@each $colorin $color-list {
  .#{$color}-bg{
    background: #{$color};
  }
}