sass基本语法

## sass基本语法 ##

    选择器嵌套：

        <nav> 
            <ul> 
                 <li><a href="#">Home</a></li> 
                 <li><a href="#">Haml</a></li> 
            </ul>
        </nav>
        
        nav{
            display:block;
            ul{
                margin:50px auto;
                &:before,&:after{
                    content:"";
                    display:table;
                }
                li{
                    float:left;
                    &:hover{
                        backgroundL#000
                    }
                    a{
                        padding:1em 2em;
                    }
                }
            }
        }

    css属性嵌套：

        css原样式
        a {
            text-transform: uppercase;
            text-decoration: none; 
            font-family: Arial,Helvetica; 
            font-size: 14px;
        }
        sass改写
        a {
            text:{
                transform: uppercase;
                decoration: none; 
            }
            font:{
                family: Arial,Helvetica;
                size: 14px;
            }
        }

    定义变量及数值计算：

        $red:'red';
        $border:5;
        .red{
            color:$red;
        }
        .border{
            top:20px+30px;  //可以直接运算
            margin-top:#{$border*$border}px //变量可以乘不能加
            border:solid #{$border}px $red;  //使用#{}进行混合编译，组合变量与px等字符
        }

    继承功能：

        .a1{
            color:blue;
        }
        .a2{
            @extend .a1;   //复用a1的样式
            font-size:#{$num}px
        }
        //通过mixin传值继承
        @mixin center($f){
            text-align:$f;
        }
        .border{
            @include center(center) //调用mixin函数
        }

    插入其他文件：

        先创建test.scss文件
        @import "./test.scss";  //在需要导入的文件中添加上了test.scss中的样式

    条件语句：

        $red:'red';
        $green:'green';
        @mixin bgColor($b){
            @if($b==5){
                background-color:#{$red};
            }@else if($b==6){
                background-color:#{$green};
            }@else{
                background-color:blue;
            }
        }

    循环语句：

        @for $i from 1 to 5{
            .a#{$i}{ //循环类名
                background-image:url("images/#{$i}.png")
            }
        }
        @each $k in 1,2,3,4{
            .c#{$k}{ 
                background-image:url("images/#{$k}.png")
            }    
        }　　

    函数：

        @function colorrgba($r,$g，$b，$a){
            @return rgba($r,$g，$b，$a);
        }
        .border{
            color:colorrgba(112,112,145,0.6)
        }

转载于:https://www.cnblogs.com/Tabb/p/9261946.html