Sass基础用法.md

#Sass基础用法

1、变量：

Sass中的变量需要以 $开头进行命名，如 $blue;如果需要插入在字符串中，则需使用#{ }进行包裹；如：border-#{$de}-color;

2、计算：

Sass允许在语句中直接使用算式记性计算，如：right: $var * 10;

3、嵌套：

Sass可以使用语法的嵌套，可以使代码的可读性更强。如：

(1) 标签嵌套

div{
	h1{ };
}

(2)属性嵌套：

p{
	border:{
		color:red;
	}
}

TIPS： 在嵌套的代码中，可以使用&来引用父级，如

a{
	&:hover{ }
}

4、注释：

/* 注释 */：普通注释，会保留到编译后的文件中，如果使用压缩模式编译，则会省略；

// 注释：只保留在Sass源文件中，编译后则省略；

/*! 重要注释 */：压缩模式下编译也会保留；

5、继承：

使用 @extend 可实现继承：

.class1{ };
.class2{
	@extend class1;
	font-size:14px;
}

6、重用代码块：

使用 @mixin进行代码块的定义，使用@include进行已定义的代码块的调用；

@mixin left{
	float:left;
	margin-left:10px;
}

div{
	@include left;
}

在代码块的定义中，也可以传入参数和默认值：

@mixin left($value:10px){
	float:left；
	margin-right:$value;
}
// 调用；
div{
	@include left(20px);
}

7、插入文件：

可以使用 @import进行文件的引入：

@import "path/filename.scss";

8、条件判断：

使用 @if/@else写条件语句；

p{
	@if 1+1 == 2{
		width:10px;
	}@else{
		width:20px;
	}
}

9、循环语句：

for循环：

@for $i from 1 to 10{
	.border-#{$i}{
		border:#{$i}px solid blue;
	}
}

while循环：

$i:6;
@while $i>0{
	.item-#{$i}{
		width:2em * $i;
	}
	$i:$i-1;
}

each语句：

@each $menber in a,b,c,d{
	.#{$menber}{
		background:blue;
	}
}

10、自定义函数：

@function double($n){
	@return $n * 2;
}

#sidebar{
	width:double(5px);
}