sass学习笔记一

sass是css预处理器之一，用后感觉比单纯的css要方便快速，且层级关系清晰明了，后缀名.scss。之前也用过，但好久不用语法都忘记了，都说好记性不如烂笔头，把学到的点滴都记下来便于后期查看。

先把sass使用频率最高的记录下，内容如下：

一：变量定义$，如：

$absolute:absolute;
$relative:relative;

.focus{
    670px;
    height: 345px;
    position: $relative;
    overflow: hidden;
    ul{
        position: $absolute;
        left:0;
    }
}

二、混合声明@mixin，调用@include，如

@mixin fl{
    float: left;
    display:inline;
}
@mixin fr{
    float: right;
    display: inline;
}
.focus{
    width:670px;
    height: 345px;
    position: $relative;
    overflow: hidden;
    ul{
        position: $absolute;
        left:0;
    }
    li{
        width: 670px;
        height: 345px;
        @include fl;
    }
}

三、嵌套标签上定义样式和伪类&

a{
    background: rgba(0,0,0,.5);

    &:hover{ 
        background: rgba(0,0,0,.8);
    }
}

.dot{
    position: $absolute;
    bottom: 10px;
    left: 0;
    span{
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 2px;
        background: #333;
        cursor: pointer;
        &.current{ /*生成后的css为：.dot span.current*/
            background: #f30;
        }
    }
}

四、跳出嵌套@at-root。注：只能跳出普通的嵌套层，但不能跳出@media或@support

.dot{
        position: $absolute;
        @at-root span{
            display: inline-block;
            background: #333;
            cursor: pointer;
            &.current{ 
                background: #f30;
            }
        }
    }

或者
.dot{
        position: $absolute;
        @at-root{ 
            span{
                display: inline-block;
                width: 10px;
                background: #333;
                cursor: pointer;
                &.current{ 
                    background: #f30;
                }
            }
        }
    }

........