Scss，Sass之@if，@for

Scss的强大毋庸置疑，而且传统的css编写也是让人头疼。

1. Scss拥有强大的去重思想，css样式往往会产生大量的重复性代码
2. Scss可以定义变量
3. Scss可以进行数学运算
4. Scss可以进行条件判断
5. Scss可以进行循环
6. Scss具有良好的结构特性

代码段

.total-vote-container {
    width: 2304px;
    height: 960px;
    background-image:  url("/images/img_bg.jpg");
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    .total-vote-title {
        width: 516px;
        height: 113px;
        background: url('/images/program_rank.png') no-repeat;
        position: relative;
        left: 950px;
        top: 50px;
    }

    .total-vote-content {
        position: absolute;
        list-style:none;
        width: 1200px;
        height: 600px;
        margin-left: 740px;
        top: 203px;
        .program-record {
            width:600px;
            height:70px;
            vertical-align: middle;
            font-family: 微软雅黑;
            font-size: 45px;
            .program-index {
                height: 100%;
                color: #fff661;
                float: left;
                font-weight: bold;
            }
            .program-name {
                height: 100%;
                width: 300px;
                color: #fff;
                float: left;
                margin-left: 20px;
                white-space:nowrap; 
                text-overflow:ellipsis; 
                -o-text-overflow:ellipsis; 
                overflow: hidden;
            }
            .heart-img {
                float: right;
                height: 100%;
                margin-right: 15px;
            }
            .total-vote {
                float: right;
                color: #fff661;
            }
        }
    }

    @mixin change-style($index) {
        @if $index < 6 { margin-left: 120 * ($index - 1) + px;}
        @else if $index == 6 {margin-left: 120 * ($index - 1) + px; font-size: 40px !important;}
    } 

    .foo {
        @include change-style(5);
    }

    @for $i from 2 to 4 {
        li:nth-child(#{$i}) { margin-left: 120 * ($i - 1) + px;}
    }

    @for $i from 4 to 6 {
        li:nth-child(#{$i}) { margin-left: 120 * ($i - 1) + px; font-size: 40px !important;}
    }
    @for $i from 6 to 8 {
        li:nth-child(#{$i}) { margin-left: 120 * (10 - $i) + px; font-size: 40px !important;}
    }
    @for $i from 8 to 11 {
        li:nth-child(#{$i}) { margin-left: 120 * (10 - $i) + px; font-size: 36px !important;}
    }
}

总结

---

1. 详细的语法讲解见sass中文文档
2. 学会了scss将让你的代码变得非常优美
3. 本篇主要讲解@if和@for通过上例，你应该可以发现，@if可以使用逻辑判断，但是不能这样使用（@else if $index < 6 &&$index > 3），我试过了。
4. 本篇还有一些关于Css选择器的使用，如果你看不懂的话，可以参考Css选择器