SASS入门使用（上代码）

sass学习简单教程：http://blog.csdn.net/songchunmin_/article/details/51781795

sass的安装：http://blog.csdn.net/songchunmin_/article/details/51781495

sass的入门使用（上代码）：http://blog.csdn.net/songchunmin_/article/details/51783487

SASS入门使用

1变量

sass中可以定义变量，方便统一修改和维护。

[css]  view plain  copy

 

1. //sass style  
2. //-----------------------------------  
3. $fontStack:    Helvetica, sans-serif;  
4. $primaryColor: #333;  
5.   
6. body {  
7.   font-family: $fontStack;  
8.   color: $primaryColor;  
9. }  
10. ----------------------------------------------------------------------  
11. //css style  
12. //-----------------------------------  
13. body {  
14.   font-family: Helvetica, sans-serif;  
15.   color: #333;  
16. }  

2嵌套

sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

[css]  view plain  copy

 

1. /sass style  
2. //-----------------------------------  
3. nav {  
4.   ul {  
5.     margin: 0;  
6.     padding: 0;  
7.     list-style: none;  
8.   }  
9.   
10.   li { display: inline-block; }  
11.   
12.   a {  
13.     display: block;  
14.     padding: 6px 12px;  
15.     text-decoration: none;  
16.   }  
17. }  
18. -------------------------------------------------------------------  
19.   
20.   
21. //css style  
22. //-----------------------------------  
23. nav ul {  
24.   margin: 0;  
25.   padding: 0;  
26.   list-style: none;  
27. }  
28.   
29. nav li {  
30.   display: inline-block;  
31. }  
32.   
33. nav a {  
34.   display: block;  
35.   padding: 6px 12px;  
36.   text-decoration: none;  
37. }  

3导入

sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

[css]  view plain  copy

 

1. //sass style  
2. //-----------------------------------  
3. // _reset.scss  
4.   
5. html,  
6. body,  
7. ul,  
8. ol {  
9.    margin: 0;  
10.   padding: 0;  
11. }  
12.   
13. //sass style  
14. //-----------------------------------  
15. // base.scss   
16.   
17. @import 'reset';  
18.   
19. body {  
20.   font-size: 100% Helvetica, sans-serif;  
21.   background-color: #efefef;  
22. }  
23. --------------------------------------------------  
24. //css style  
25. //-----------------------------------  
26. html, body, ul, ol {  
27.   margin: 0;  
28.   padding: 0;  
29. }  
30.   
31. body {  
32.   background-color: #efefef;  
33.   font-size: 100% Helvetica, sans-serif;  
34. }  

4扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

//sass style
//-----------------------------------
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}
--------------------------------

//css style
//-----------------------------------
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

5运算

sass可进行简单的加减乘除运算等

//sass style
//-----------------------------------
.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}
-------------------------------------------
//css style
//-----------------------------------
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

6颜色

sass中集成了大量的颜色函数，让变换颜色更加简单

//sass style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}
---------------------------------------
//css style
//-----------------------------------
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

其他更多： http://www.w3cplus.com/sassguide/syntax.html