sass学习研究

摘要: sass，scss，学习总结

这篇文章是算是前两天学习sass的一个摘要和总结吧，简单记载下。希望对大家有所帮助

对于什么是sass，我想现在大家可能都有所了解了。其实就是css的一种开发工具，或者也可以说是将css编程化。其实和less是有很大的相似点的。或者说几乎都是相同的。但是对于这两种的高级用法，其实个人更加的偏向于sass！

关于sass的安装以及编译之类的这个东西上网一查一大把的就不多说了

我这里是用koala编译的。

下面简单的总结下sass的几个特点吧。

1、变量：

sass中允许使用变量，在sass中变量都是以$开头的。

$blue:#249804;

div{

color:$blue;

}

如果需要将变量嵌入在字符串中则就必须写在#{}中

类似于我在汇联易中自定义的栅格宽度的sass写法：

@mixin colWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $value;

-moz-box-flex: 0;

-moz-flex: 0 0 $value;

-ms-flex: 0 0 $value;

flex: 0 0 $value;

}

$i:1;

@while $i<=100{

.col-#{$i}{

@include colWidth($i*1%);

$i:$i+1;

}

}

／／这里用到的Mixin和循环后面会讲到。

变量非常的简单，基本也就这样。

2、计算功能

这个非常的简单，举个例子就可以了

在上面的例子中也用到了，比如$i*1%；

再比如：margin:(10px+2px);

3、嵌套

这里的嵌套给我的感觉就类似于dom树的树状结构似的。

很简单，举个例子就可以了

.hly{

.expense-type-icon-list {

box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, .26);

.scroll {

float: left;

.scroll-content-container {

width: 35em;

padding: 8px 10px;

float: left;

img {

float: left;

margin-left: 5px;

}

img:first-child {

margin-left: 0px;

}

}

}

}

}

对应的生成出来的css：

.hly .create-invoice .expense-type-icon-list {

box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, 0.26); }

.hly .create-invoice .expense-type-icon-list .scroll {

float: left; }

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container {

width: 35em;

padding: 8px 10px;

float: left; }

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img {

float: left;

margin-left: 5px; }

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img:first-child {

margin-left: 0px; }

4、继承

sass允许一个选择器去继承另一个选择器，比如现在有个class1，

.class1{

border:1px soild #ddd;

}

现在有class2要继承class1的属性，则用@extend命令

.class2{

@extend .class1;

font-size:1.5em;

}

5、Mixin

这个可以理解为宏定义，angularjs中的指令，在变量的举例中就有说到了。这里再具体的说下

这里我们通过一个mixin来定义一个代码块

还是拿上面的例子：

@mixin colWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $value;

-moz-box-flex: 0;

-moz-flex: 0 0 $value;

-ms-flex: 0 0 $value;

flex: 0 0 $value;

}

用@include来调用它。

div{

@include colWidth(30%);

}

看到这里大家可能会有个疑问，为什么这里的mixin中有个参数在里面？

其实这个也就是Mixin的强大之处了（当然，你也可以不指定）

当指定了以后，我们可以传入不同的值，当然也可以缺省，当缺省的时候就是默认的指，例如上面的例子就是20%

6、颜色函数

说实话这个我不是很懂，因为基本我觉得是用不到的。简单从网上找了些例子：

lighten(#cc3, 10%) // #d6d65c

　　darken(#cc3, 10%) // #a3a329

　　grayscale(#cc3) // #808080

　　complement(#cc3) // #33c

大家这个也可以多查查。

7、插入文件

简单的一个命令@import

@import("path/fileName.scss");

如果是.css的文件

@import "fileName.css";

8、条件语句

从这里开始应该可以说是sass的一些高级的用法了吧

@if可以用来判断

div{

@if 1+2 ==3 {border:1px soild #ddd};

@if 3<2 {margin:0 auto};

}

当然，既然存在if，必然少不了else！用法如下：

@if lightness($color) > 30% {

　　　　background-color: #000;

　　} @else {

　　　　background-color: #fff;

　　}

9、循环语句

sass支持for循环，while循环以及each命令

for循环：

@for $i form 1 to 10{

.class-#{i}{

margin-left:#{i}px;

}

}

while循环（同样是汇联易中的例子）：

@mixin colWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $value;

-moz-box-flex: 0;

-moz-flex: 0 0 $value;

-ms-flex: 0 0 $value;

flex: 0 0 $value;

}

$i:1;

@while $i<=100{

.col-#{$i}{

@include colWidth($i*1%);

$i:$i+1;

}

}

each例子：

@each $member in a, b, c, d {

　　　.#{$member} {

　　　　　background-image: url("/image/#{$member}.jpg");

　　　}

　　}

10、自定义函数

当然也是有特殊符号的：@function @return

@function double($i){

@return $i*2;

}

div{

margin:double(2em);

}

最后说一句，在项目中尽量还是少用sass的高级用法，因为可能项目跑起来编译特别慢，甚至会卡在高级用法中编译不出sass别的样式

比如我自定的栅格用的Mixin，这个在项目能够很快被编译，但是配合了while循环就会卡死。后来我是引入koala编译出来的css文件引入到项目中的～