关于SASS工具

标签：

SASS

SASS是一种CSS的开发工具，它具有很强大的功能。众所周知，css不是一种编程语言，而是一种网页开发工具，不具有变量。但是SASS可以设置变量，可以有函数，是一种很强大的网页开发工具。

--------------------------------------
基本用法

SASS允许使用变量，所有变量以$开头。如：

        $color : red;         
        div {     
            color : $color;         
        }

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

        $side : left;         
        div {         
            border-#{$side}-radius: 5px;         
        }

SASS允许在代码中使用算式：

        body {         
            width: (14px/2);         
            height: 50px + 100px;                  
        }

SASS允许选择器嵌套。如：

        div h1 {         
            color : red;     
        }
可以写成：
        div {         
            h1 {         
                color:red;         
            }         
        }

属性也可以嵌套，比如border-color属性，可以写成：

        p {         
            border: {     
                color: red;         
            }         
        }
        //上面代码也等于下面
        p {
            border-color:red;
        }


注意，属性嵌套时，border后面必须加上冒号。

在嵌套的代码块内，&可以代表父元素。比如a:hover伪类，可以写成：
        a {
            &:hover { color: red; }         
        }

mixin混合变量：

可以指定参数和变量.如下面代码块:

        @mixin box($width:10px,$height) {         
            width: $width;         
            height: $height;         
        }

在后面引用这个代码块时，可以使用@include box的方法。如：
        div{
            @include box(10px,10px);
        }

        //在传参数的时候，如果代码块里有默认的值，我们可以不传这个参数。如：
        div{
            @include box(10px);
        }

关于SASS工具

标签：

原文地址：http://www.cnblogs.com/ddzhao1989/p/4658584.html