sacc此博文包含图片

CSS不是一种编程语言，它只是个配置文件，并没有生命。但我等大程序  怎么能容忍自己写出来的东西不能动态变化，不能封装继承，不能xxoo呢，于是就有了css预处理的概念。即，写是一套，用是一套。Scss是css预处理的一个选择，它依托于Ruby，算是逼格比较高的。相似的还有Less等，语言优劣之争意义不大，用好一个其他也是大同小异。

安装

Mac上自带Ruby，直接运行：

[css] view plain copy

 

 print?

1. gem install sass  

安装对应模块，然后可以使用：

[css] view plain copy

 

 print?

1. sass --watch style.scss:style.css  

命令来监视style.scss，当它有更改时，会自动编译成style.css。

友情提示： 我运行gem时完全不动，还以为是掉网了。后来听说是我大GFW威武，可以将源更改为x宝的服务器来解决：

[css] view plain copy

 

 print?

1. $ gem sources -l  
2. $ gem sources --remove https://rubygems.org/    
3. $ gem sources -a http://ruby.taobao.org/  
4. $ gem sources -l  
5.   
6. //然后我顺手更新了一下Ruby的版本  
7. $ sudo gem update --system   

经过上面的折腾，顺利安装sass 

常用语法

变量

[css] view plain copy

 

 print?

1. //定义  
2. $magin : 30px; //px  
3. $blue : #1875e7; //color  
4. $side : left; //str Usage: boder-#{$side}-radius  

所有的数字类型的变量都可以进行相应的计算。

嵌套

[css] view plain copy

 

 print?

1. nav {  
2.     ul {...}  
3.     border : { //注意冒号 相当于树形属性 会编译成 border-color:red  
4.         color : red;  
5.     }  
6.     a {  
7.         &:hover { color :$blue;} //&表示引用上层 会编译成 a:hover{...}  
8.     }  
9. }   

注释

标准的CSS注释 ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

继承

使用@extend可以继承相应的css:

[css] view plain copy

 

 print?

1. .class1 {  
2.     border:1px solid #ddd;  
3. }  
4.   
5. .class2 {  
6.     @extend .class1;  
7.     border-color: green;  
8. }  

写的时候要注意顺序，编译时，css是不会调顺序的，谁先谁后得想好了。

Mixin

这个是一个函数与宏的私生子。实现像函数，使用像宏。关键词为@mixin和@include

[css] view plain copy

 

 print?

1. @mixin left($color, $value:10px) {  
2.     color:$color;  
3.     margin-left:$value;  
4. }  
5.   
6. .mydiv {  
7.     @include left($blue,15px);  
8. }  

颜色处理函数

[css] view plain copy

 

 print?

1. lighten(#cc3, 10%) // #d6d65c  
2. darken(#cc3, 10%) // #a3a329  
3. grayscale(#cc3) // #808080  
4. complement(#cc3) // #33c  
5.   
6. $linkColor: #08c;  
7. a {  
8.     text-decoration:none;  
9.     color:$linkColor;  
10.     &:hover{  
11.       color:darken($linkColor,10%);  
12.     }  
13. }  

用这个方法就能制作一个链接变灰的效果

引入文件

@import "style2.css";

逻辑编译

想要真正的动起来，就得有判断啦，循环啦常规流程函数。

@if可一个条件单独使用，也可以和@else结合多条件使用

[css] view plain copy

 

 print?

1. $type: monster;  
2. p {  
3.   @if $type == ocean {  
4.     color: blue;  
5.   } @else if $type == matador {  
6.     color: red;  
7.   } @else if $type == monster {  
8.     color: green;  
9.   } @else {  
10.     color: black;  
11.   }  
12. }