CSS架构Acss层基础常用属性选择器之Scss封装

css架构正在整理会尽快发简书～

• white-space.scss

/*
// 2 => 60 双数
[mt2]{
    margin-top: 2px;
}
[ml2] => margin-left
[mr2] => margin-right
[mb2] => margin-bottom
[ma2]{
    margin: 2px;
}
[mh2]{
    margin-left: 2px;
    margin-right: 2px;
}
[mv2]{
    margin-top: 2px;
    margin-bottom: 2px;
}
*/


$i: 0;

@while $i<=40 {

    @each $k,
    $v in (l:left, r:right, t:top, b:bottom, a:all, h:horizontal, v:vertical) {

        @if $k==a {
            [m#{$k}#{$i}] {
                margin: $i+px;
            }

            [p#{$k}#{$i}] {
                padding: $i+px;
            }
        }

        @else if $k==h {
            [m#{$k}#{$i}] {
                margin-left: $i+px;
                margin-right: $i+px;
            }

            [p#{$k}#{$i}] {
                padding-left: $i+px;
                padding-right: $i+px;
            }
        }

        @else if $k==v {
            [m#{$k}#{$i}] {
                margin-top: $i+px;
                margin-bottom: $i+px;
            }

            [p#{$k}#{$i}] {
                padding-top: $i+px;
                padding-bottom: $i+px;
            }
        }

        @else {
            [m#{$k}#{$i}] {
                margin-#{$v}: $i+px;
            }

            [p#{$k}#{$i}] {
                padding-#{$v}: $i+px;
            }
        }
    }

    $i: $i+2;
}

• font-size.scss

/*
[fs12]{
    font-size: 12px;
}
...
[fs60]{
    font-size:60px;
}
*/

$i: 12;

@while $i<=60 {
    [fs#{$i}] {
        font-size: $i+px;
    }

    $i: $i+2;
}

@for $v from 1 through 8 {
    [fontW#{$v*100}] {
        font-weight: #{$v*100};
    }
}

• font-color.scss

/*

[font-primary] {
    color: #333;
}

[font-secondary] {
    color: #666;
}

[font-tertiary] {
    color: #fff;
}

[font-quaternary] {
    color: #ff5777;
}

*/

// @each $title,
// $color in (primary, #333),
// (secondary, #666),
// (tertiary, #fff),
// (quaternary, #ff5777) {
//     [font-#{$title}] {
//         color: $color;
//     }
// }

@each $title,
$color in (primary: #333, secondary: #666, tertiary: #fff, quaternary: #ff5777) {
    [font-#{$title}] {
        color: $color;
    }
}

• ellipsis.scss

@mixin box-clamp($lines: 1, $substract: 0) {
    @if $lines==1 {
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100% - $substract;
        overflow: hidden;
    }

    @else {
        overflow: hidden;
        display: -webkit-box;
        display: box;
        -webkit-line-clamp: $lines;
        line-clamp: $lines;
        -webkit-box-orient: vertical;
        box-orient: vertical;
    }
}

// 溢出多少行后省略号隐藏

@for $var from 1 through 3 {
    [ellipsis-#{$var}] {
        @include box-clamp($var);
    }
}

• border-radius.scss

[circle] {
    border-radius: 50%;
}

$i:2;

@while $i<=20 {
    [radius#{$i}] {
        border-radius: $i + px;
    }

    $i:$i+2;
}

• background.scss

// 透明度
@each $v in (0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1) {
    [bga#{$v * 10}] {
        background: rgba($color: #000000, $alpha:$v);
    }
}

// 背景颜色
@each $var in (primary:#f1f1f1, secondary:#fff, tertiary:#ff5777) {
    [bg-#{nth($var, 1)}] {
        background-color: #{nth($var, 2)};
    }
}