sass总结

以前一直零散的在用sass，没有系统的做一下整理，最近换了电脑用sass的时候又遇到了各种问题，不记得自己安装过什么依赖，什么软件，因为安装得太多了，把以前的弯路又走了一回。
以下只是sass相关，非gulp，webpack下安装，后期我自己乱了，理解成没有gulp,webpack等sass是没法自己存在的。又一次说明了整理的重要性。

安装

依赖于ruby，不过mac下自带ruby。这个要注意下

1
2
3
4
5
6
7
8
9
gem install sass 安装 （mac下 sudo gem install sass）
sass -v 查看版本，如显示版本说明安装成功
sass -h 帮助   
gem update sass 升级sass   
以下是安全上网的镜向方法(镜向)   
gem source --remove https://rubygems.org/   
gem source -a https://ruby.taobao.org/ 指向taobao  
gem sources -l

编译

1
2
sass folder/style.scss:css/style.css  --style compact 编译   后面是类型
sass --watch folder/style.scss:css/style.css 监视模式

格式

sass有以下两种
.sass（写法太超前，不推荐）
.scss（类css的语法）

编译类型

1
2
3
4
nested 嵌套（默认）
compact 紧凑 （一行显示）
compressed 压缩（上线）
expanded 扩展（类css格式）

常用用法如下：

变量

1
2
3
4
5
6
$primaryColor:#333;
$primaryBorder:1px solid $primaryColor;
div{
	color:$primaryColor;
	border:$primaryBorder;
}

嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
选择器
ul{
	color:#333;
	li{
		color:#666;
	}
}
属性
nav{
	border:{
		style:solid;
		left:{
			width:4px;
			color:#333;
		}
	}
}

导入

1
2
3
4
5
A:_rest.scss
B: base.css
C: use.scss
	@import "rest"; 整合
	@import "base.css" 直接显示

扩展&继承

1
2
.message{color:#333;}
.subMessage{@extend .message;}

颜色

1
2
3
4
5
6
7
$linkColor:#333;
a{
	color:linkColor;
	&:hover{
		color:darken($linkColor,10%);
	}
}

多值变量

1
2
3
4
5
6
7
$linkColor : #333 #666 !default;
a{
	color:nth($linkColor,1);
	&:hover{
		color:nth($linkColor,2);
	}
}

占位符

1
2
3
4
5
6
%fl{
	float:left;	
}
div{
	@extend %fl;
}

运算

1
2
3
article{
	width:600px/960px;
}

待补充…