Scss，Sass之@if，@for

来源：互联网发布：中文域名续费价格编辑：程序博客网时间：2024/05/23 13:13

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

Scss拥有强大的去重思想，css样式往往会产生大量的重复性代码
Scss可以定义变量
Scss可以进行数学运算
Scss可以进行条件判断
Scss可以进行循环
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;}    }}

总结

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

0 0