sass学习研究

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

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

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

我这里是用koala编译的。

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

一、变量：

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和循环后面会讲到。

变量很是的简单，基本也就这样。

二、计算功能

这个很是的简单，举个例子就能够了

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

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

三、嵌套

这里的嵌套给个人感受就相似于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; }

四、继承

sass容许一个选择器去继承另外一个选择器，好比如今有个class1，

.class1{

border:1px soild #ddd;

}

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

.class2{

@extend .class1;

font-size:1.5em;

}

五、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%

六、颜色函数

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

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

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

　　grayscale(#cc3) // #808080

　　complement(#cc3) // #33c

你们这个也能够多查查。

七、插入文件

简单的一个命令@import

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

若是是.css的文件

@import "fileName.css";

八、条件语句

从这里开始应该能够说是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;

　　}

九、循环语句

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");

　　　}

　　}

十、自定义函数

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

@function double($i){

@return $i*2;

}

div{

margin:double(2em);

}

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

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