Sass跟Scss 上手-2015

文章作者：松阳

 

本文出自 阿修罗道，禁止用于商业用途，转载请注明出处。  

原文链接：http://blog.csdn.net/fansongy/article/details/44964187
 

---

 

Why Scss

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 */ ，会保留到编译后的文件。

单行注释 // 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. }  

for循环有两种形式，分别为：@for $var from <start> through <end> 和 @for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

[css]  view plain copy print ?

 

1. @for $i from 1 through 3 {  
2.   .item-#{$i} { width: 2em * $i; }  
3. }  

each语法为:@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。

[css]  view plain copy print ?

 

1. $animal-list: puma, sea-slug, egret, salamander;  
2. @each $animal in $animal-list {  
3.   .#{$animal}-icon {  
4.     background-image: url('/images/#{$animal}.png');  
5.   }  
6. }  
7.   
8. $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);  
9. @each $header, $size in $headings {  
10.   #{$header} {  
11.     font-size: $size;  
12.   }  
13. }  

sublime 分页

其实这个也不能算是Scss的知识了，只不过是用到它更方便一些。Sublime可以左右分屏，我们可以将源文件放在左侧的窗口中编译后的放在右侧，方便我们做检查。Mac上的快捷键比较变态:

[css]  view plain copy print ?

 

1. cmd+option+ctrl+2   

左右移动使用

[css]  view plain copy print ?

 

1. cmd+shift+[   

如果你觉得这篇文章对你有帮助，可以顺手点个顶，不但不会喜当爹，还能让更多人能看到它...