SASS的笔记

1.变量

SASS样式中可以使用“$”定义变量，以便重复利用，比如一个字体或一种颜色循环利用，定义如下：

$my-color: #000f
body{
  color:$my-color;  
}

2.嵌套定义css

body{
  color:$my-color;
  div{
       margin: 0;
       padding: 0;    
  }    
}

3.混入

css中我们经常遇到使用相同的语句定义样式，比如margin-top：5px，border-radius：3px，仅仅调用的像素不同，因此在这里可以使用@Mixin达到代码复用，如下：

@Mixin  border-radius($radius){
  border-radius:$radius;  
}

div{
　@include:border-radius(10px)
}

4.继承

当我们遇到好几个元素都有几个相通的样式，但是又在某一方面有所不同，就可以采用继承的方案解决，如下：

%message{
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
   font:14px;  
}

.message-warning{
  @extend  %message;
  color:orange;  
}

.message-warning{
  @extend  %message;
  color:red;  
}

.message-warning{
  @extend  %message;
  color:green;  
}

这里也都有color，可以利用上面的混合（@Mixin）定义一个

@Mixin color（$color）{
  color:$color;  
}

5.操作符

SASS提供了"+","-","*","/","%"等运算符，可以在统计样式时做简单的计算，如下：

$140px;
$height:200px;

div{
  (900px - $width)/900*100% ;
  height:(500px - $height)/900*100%   
}

6.css拓展

引用父级选择器"&"

使用 & 表示父级元素选择器，如下：

a{
  color: red;
  &:hover{
    color:green
  }
  body.firefox & {
    font-weight: normal; 
  }
}

/*===== CSS =====*/
a {
  color: red;
}
a:hover {
  color:green
}
body.firefox a {
  font-weight: normal; 
}

父级元素选择器会提替换 & 。

嵌套属性

嵌套属性目的在于对那些有相同命名空间的属性，如，border-radius，border-bottom，border-top，font-size，font-weight，font-family等这些css样式属性，这些都有相同的前缀，所以多次写会显得冗余，因此可以采用嵌套设为同一个命名空间，如下：

div{
  /*注意设置统一命名空间需要加 : */
  border:{
   radius:5px;
   color:red;
   bottom:3px;
 }  
}
/*编译为CSS*/
div{
  border- radius:5px;
  border-color:red;
  border-bottom:3px;
}