20160115

学习sass教程

变量(以 $ 号开头)

1.$blue : #1875e7;  /*中间用 : 号*/
2.div{
3. color: $blue;
4.}

在字符串中使用变量,用 #{}

1.$side : left;
2..rounded{
3. border-#{$side}-radius : 5px;
4.}

计算功能

sass允许在代码中使用算式

1.body{
2. margin: (14px/2);
3. top: 50px + 100px;
4. right: $var * 10%;
5.}

嵌套

sass允许选择器嵌套

1.div h1{   /*这个选择 div 的所有后代中的 h1*/
2. color: red;
3.}
4./*sass 允许写成嵌套形式*/
5.div {
6. h1 {
7. color: red;
8. }
9.}
10./*属性也可以嵌套*/
11.div{
12. border: {
13. color: red;
/*相当于 border-color,注意 border 后面一定要有 : */
14. }
15.}
16./*嵌套的代码块内,使用 & 可以引用父元素*/
17.a{
18. &:hover{ color: #ffb3ff; }
19.}

注释

1./* 标准的 css 注释,会保留在编译后的 css 中 */
2.// 单行注释,只会保留在 sass 中。
3./*! 重要注释,即使是压缩模式,也会保留,一般用来声明版权信息。 */

继承

sass 允许一个选择器,继承另一个选择器。用 @extend 命令

1..class1{
2. border-radius: 1px solid #ddd;
3.}
4..class2{
5. @extend .class1; // 重用 class1 的代码
6. font-size: 120%;
7.}

mixin

Mixin 有点像 C 语言中的宏,是可以重用的代码块。用 @mixin 命令,定义一个代码块。使用 @include 命令,调用这个 mixin。

1.@mixin left{
2. float: left;
3. margin-left: 10px;
4.}
5./*使用 @include 命令,调用这个 mixin*/
6.div{
7. @include left;
8.}
9./*mixin 的强大之处,在于可以设置参数和缺省值*/
10.@mixin left($value: 10px){
11. float: left;
12. margin-right: $value;
13.}
14./*使用的时候,根据需要传入参数*/
15.div{
16. @include left(20px);
17.}

下面是一个 mixin 的实例,用来生成浏览器前缀

1.@mixin rounded($vert, $horz, $radius: 10px){
2. border-#{$vert}-#{$horz}-radius: $radius;
3. moz-border-#{$vert}-#{$horz}-radius: $radius;
4. -webkit-border-#{$vert}-#{$horz}-radius: $radius;
5.}
6.// 使用的时候,可以像下面这样调用
7.#navbar li{ @include rounded(top, left); }
8.#footer{ @include rounded(top, left, 5px); }

颜色函数

sass 内置了一些颜色函数,以便生成系列颜色

1.lighten(#cc3, 10%) // #d6d65c
2.darken(#cc3, 10%) // #a3a329
3.grayscale(#cc3) // #808080
4.complement(#cc3) // #33c

插入文件

用 @import 命令,来插入外部文件

1.@import "path/filename.scss"
2./*如果插入的是 css 文件,等同于 css 中的 @import 命令*/
3.@import "foo.css";

条件语句

if 可以用来进行条件判断,配套的的还有 @else

1.p{
2. @if 1 + 1 == 2 { border: 1px solid }
3. @if 5 < 3 {border: 2px dotted}
4.}
5.// 配套的还有 @else 命令
6.@if lightless($color) > 30%{
7. background-color: #000;

8.}@else{
9. background-color: #FFF;
10.}

循环语句

sass 语句支持 for 循环,用 @for写

1.@for $i from 1 to 10{
2. .border-#{$i}{
3. border: #{$i}px solid blue;
4. }
5.}
6.// 还可以用 while 循环
7.$i: 6;
8.@while i > 0{
9. .item-#{$i}{ width: 2em * $i; }
10. $i = $i - 2;
11.}
12.// 还可以用@each(相当于在集合中查找,这里是不同的文件名)
13.@each $member in a, b, c, d{
14. .#{$member}{
15. background-image: url("/image/#{$member}.jpg");
16. }
17.}

自定义函数

sass 允许用户编写自定义函数 @function @return

1.@function double($n){
2. @return $n * 2;
3.}
4.#sidebar {
5. width: double(5px);
6.}

MVC,MVP 和 MVVM 的图示

来自阮一峰的博客