sass&

.scss后缀文件

.header{
  font-size: 12px;
  .main:active{
    background-color: #f40;;
  }
  // &代表外层父级
  &:hover{
    color: #000;
  }
}
//定义变量,一定义要写在执行之前
$text-color:#444;
//使用变量
color:$text-color;
//lighten颜色变浅
color:lighten($text-color,20%);
//darken颜色变深
color:darken($text-color,20%);
//引入scss文件(拆分)(下划线)
@import './style';
@import 'header';
//mixin混入(可以共用的代码)
//一个文件里面
@mixin box($width){ //传入变量
	width:$width;
	height:100px;
}
div{
	@include box(100px);
	color:#f40;
	background:#aaa;
}
//单个文件引入 
@import 'mixin';
div{
	@include box(100px);
	color:#f40;
	background:#aaa;
}
//@content(和插值差不多)
@mixin ipad{
	@media screen and (min-width:768px){
		@content;
	}
}
@include ipad{
	width:500px
}

.sass后缀文件（不常见）