公共样式封装

246 阅读1分钟

// ---------------------------------------- 外边距、内边距 -------------------------------------------------

css
@for $i from -60 to 300 {
    .pr-#{$i} {
        padding-right:#{$i}px;
    }
    .pl-#{$i} {
        padding-left:#{$i}px;
    }
    .pt-#{$i} {
        padding-top:#{$i}px;
    }
    .pb-#{$i} {
        padding-bottom:#{$i}px;
    }
    .mr-#{$i} {
        margin-right:#{$i}px;
    }
    .ml-#{$i} {
        margin-left:#{$i}px;
    }
    .mt-#{$i} {
        margin-top:#{$i}px;
    }
    .mb-#{$i} {
        margin-bottom:#{$i}px;
    }
    .min-w-#{$i} {
        min-width: #{$i}px;
    }
    $i: $i + 5
}

// ---------------------------------------------------- 宽、高、trbl 和 padding、margin值、background-position ---------------------------------------------------

css
@for $i from -50 to 600 {
    .w-#{$i} {
        width:#{$i}px;
	}
	.mw-#{$i} {
        min-width:#{$i}px;
    }
    .h-#{$i} {
        height:#{$i}px;
    }
    .t-#{$i} {
        top: #{$i}px;
    }
    .r-#{$i} {
        right: #{$i}px;
    }
    .b-#{$i} {
        bottom: #{$i}px;
    }
    .l-#{$i} {
        left: #{$i}px;
    }
    .p-#{$i} {
        padding: #{$i}px #{$i}px;
    }
    .m-#{$i} {
        margin: #{$i}px #{$i}px;
    }
    $i: $i + 1
}

// ---------------------------------------------------行间距、字体大小-------------------------------------------

@for $i from 0 to 50 {
    .fs-#{$i} {
        font-size:#{$i}px;
    }
    .lh-#{$i} {
        line-height: #{$i}px;
    }
    $i: $i + 1
}