sass常用语法

sass

在使用sass的时候我们一般使用.scss后缀名的文件，这个后缀名兼容我们经常写的css。

用软件 koala 编译的时候 如果 sass 出现中文会报错解决字符集问题

找到koala安装目录 C:\Program Files\Koala\rubygems\gems\sass-3.4.9\bin 下的 sass 文件

放在所有的require XXXX 之后即可。
Encoding.default_external = Encoding.find('utf-8')

sass 常用语法

在sass中是有全局变量和局部变量之分的，如果你了解js的全局变量和私有变量，那么sass的变量分类也不难理解，因为二者基本一样，全局变量可以在sass文件的任何地方使用，局部变量只能在定义的区域内有效。

全局变量

$bgColor:yellow;
$color:pink;
div{
// 局部变量
$color: green;
background: $bgColor;
color: $color;
}
p{
color: $color;
}

以上代码编译出来就是：
div{
background: yellow;
color: green;
}
p{
color: yellow;
}

嵌套

嵌套和less的使用方法是一样的，在方便开发的同时也有效防止了样式的冲突问题。
div{
width: 400px;
height: 200px;
.box{
	background: yellow;
}
ul{
	list-style: none;
	li{
		//  自己
		&:hover{
			background:red;
		}
		a{

		}
		a:hover{
			color:red;
		}
	}
}
}

编译之后：
div {
  width: 400px;
  height: 200px;
}
div .box {
  background: yellow;
}
div ul {
  list-style: none;
}
div ul li:hover {
  background: red;
}
div ul li a:hover {
  color: red;
}

混合：

所谓混合，就是在其他地方（全局）定义的样式可以拿过来自己用，它使用 @mixin 来定义，在使用的时候@include name()来混合使用。
@mixin ab(){
width: 200px;	
height: 300px;
}

@mixin bc($color){
width: 200px;	
height: 300px;
color: $color;
}

.box{
@include ab();
}

.box1{
background: pink;	
@include ab();
}

.box2{
width: 100px;
height: 200px;
@include bc(yellow);
}

编译后：
.box {
  width: 200px;
  height: 300px;
}

.box1 {
  background: pink;
  width: 200px;
  height: 300px;
}

.box2 {
  width: 100px;
  height: 200px;
  width: 200px;
  height: 300px;
  color: yellow;
}

函数 ：

我们可以在函数中进行计算和逻辑计算：通过@function定义函数，返回值用@return 
@function jsWidth($w){
@return ($w/2)+100px;
}

.box3{
width: jsWidth(960px);
}

编译后：
.box3 {
  width: 580px;
}

继承：

继承定义是先在外部定义一个类，然后通过@extend进行继承 
.item{
width: 300px;
height: 50px;
border: 1px solid green;
}

.box4{
background: pink;
@extend .item;

}
编译后：
.item, .box4 {
  width: 300px;
  height: 50px;
  border: 1px solid green;
}

.box4 {
  background: pink;
}

占位符：

占位符就是不占位置，不会进行编译。
%clear{
clear: both;	
}

%mt10{
margin-top: 10px;
}

div{
@extend %clear;
@extend %mt10;
}

编译后：
div {
  clear: both;
}

div {
  margin-top: 10px;
}