uni-App 单位rpx scss 常用的 封装 样式表 后

scss封装样式表

$colorlist: (
    (title: '00', color: #000000),
  
    (title: '33', color: #333333),
  
    (title: '66', color: #666666),
  
    (title: '99', color: #999999),

    (title: 'aa', color: #aaaaaa),
    (title: 'a1', color: #a1a1a1),
    (title: 'a2', color: #a2a2a2),
    (title: 'a3', color: #a3a3a3),
    (title: 'a4', color: #a4a4a4),
    (title: 'a5', color: #a5a5a5),
    (title: 'a6', color: #a6a6a6),
    (title: 'a7', color: #a7a7a7),
    (title: 'a8', color: #a8a8a8),
    (title: 'a9', color: #a9a9a9),

    (title: 'b9', color: #b9b9b9),

    (title: 'cc', color: #cccccc),
    (title: 'ca', color: #cacaca),


    (title: 'd0', color: #d0d0d0),
    (title: 'd7', color: #d7d7d7),


    (title: 'e9', color: #e9e9e9),


    (title: 'ff', color: #ffffff),
    (title: 'f1', color: #f1f1f1),
    (title: 'f2', color: #f2f2f2),
    (title: 'f3', color: #f3f3f3),
    (title: 'f4', color: #f4f4f4),
    (title: 'f5', color: #f5f5f5),
    (title: 'f6', color: #f6f6f6),
    (title: 'f7', color: #f7f7f7),
    (title: 'f8', color: #f8f8f8),
    (title: 'f9', color: #f9f9f9),

    (title: '15ca2b', color: #15ca2b),

    (title: '2d3748', color: #2d3748),

    (title: '411411', color: #411411),

    (title: '969799', color: #969799),

    (title: '9c112f', color: #9c112f),

    (title: 'b5afaf', color: #b5afaf),

    (title: 'c44320', color: #c44320),

    (title: 'c8c9cc', color: #c8c9cc),
    
    (title: 'ccd6e0', color: #ccd6e0),

    (title: 'd29d36', color: #d29d36),

    (title: 'db1019', color: #db1019),

    (title: 'ef3b62', color: #ef3b62),

    (title: 'ef807c', color: #ef807c),

    (title: 'efbd5c', color: #efbd5c),

    (title: 'ffb400', color: #ffb400),

    (title: 'ffb80c', color: #ffb80c),

    (title: 'ffc527', color: #ffc527),

    (title: 'ffd5de', color: #ffd5de),

    (title: 'ffd74c', color: #ffd74c),

    (title: 'ffeab2', color: #ffeab2),

    (title: 'ffefca', color: #ffefca),

    (title: 'ffe5eb', color: #ffe5eb),

    (title: 'ffeff3', color: #ffeff3),

    (title: 'ffe9ee', color: #ffe9ee),

    (title: 'fff2f4', color: #fff2f4),

    (title: 'fff3c8', color: #fff3c8),

    (title: 'ff6678', color: #ff6678),

    (title: 'ff6687', color: #ff6687),

    (title: 'ff7190', color: #ff7190),

    (title: 'f23c63', color: #f23c63),
  
);

/* 字体 颜色 */
@for $i from 1 through length($colorlist)  {
    $item: nth($colorlist, $i);
    $title : map-get($map: $item, $key: title );
    $color: map-get($map: $item, $key: color );
    .cor-#{$title}{
        color: $color;
    }
}

/* 背景 单色 颜色  */
@for $i from 1 through length($colorlist)  {
    $item: nth($colorlist, $i);
    $title : map-get($map: $item, $key: title );
    $color: map-get($map: $item, $key: color );
    .bg-#{$title}{
        background: $color;
    }
}

/* 黑色背景 透明度 */
@for $i from 0 through 10  {
    .bg-rgab-00-#{$i}{
        background:rgba(0,0,0,$i/10);
    }
}

/* 宽度  rpx */
@for $i from 1 through 500 {
    .w-#{$i} {
        width: $i + rpx;
    }
}

/* 宽度 高度 圆角 % */
$list: (
    (title: '10', con: 10%),
    (title: '11', con: 11%),
    (title: '12', con: 12%),
    (title: '13', con: 13%),
    (title: '14', con: 14%),
    (title: '15', con: 15%),
    (title: '16', con: 16%),
    (title: '17', con: 17%),
    (title: '18', con: 18%),
    (title: '19', con: 19%),
    
    (title: '20', con: 20%),
    (title: '21', con: 21%),
    (title: '22', con: 22%),
    (title: '23', con: 23%),
    (title: '24', con: 24%),
    (title: '25', con: 25%),
    (title: '26', con: 26%),
    (title: '27', con: 27%),
    (title: '28', con: 28%),
    (title: '29', con: 29%),
    
    (title: '30', con: 30%),
    (title: '31', con: 31%),
    (title: '32', con: 32%),
    (title: '33', con: 33%),
    (title: '34', con: 34%),
    (title: '35', con: 35%),
    (title: '36', con: 36%),
    (title: '37', con: 37%),
    (title: '38', con: 38%),
    (title: '39', con: 39%),
    
    (title: '40', con: 40%),
    (title: '41', con: 41%),
    (title: '42', con: 42%),
    (title: '43', con: 43%),
    (title: '44', con: 44%),
    (title: '45', con: 45%),
    (title: '46', con: 46%),
    (title: '47', con: 47%),
    (title: '48', con: 48%),
    (title: '49', con: 49%),
    
    (title: '50', con: 50%),
    (title: '51', con: 51%),
    (title: '52', con: 52%),
    (title: '53', con: 53%),
    (title: '54', con: 54%),
    (title: '55', con: 55%),
    (title: '56', con: 56%),
    (title: '57', con: 57%),
    (title: '58', con: 58%),
    (title: '59', con: 59%),
    
    (title: '60', con: 60%),
    (title: '61', con: 61%),
    (title: '62', con: 62%),
    (title: '63', con: 63%),
    (title: '64', con: 64%),
    (title: '65', con: 65%),
    (title: '66', con: 66%),
    (title: '67', con: 67%),
    (title: '68', con: 68%),
    (title: '69', con: 69%),
    
    (title: '70', con: 70%),
    (title: '71', con: 71%),
    (title: '72', con: 72%),
    (title: '73', con: 73%),
    (title: '74', con: 74%),
    (title: '75', con: 75%),
    (title: '76', con: 76%),
    (title: '77', con: 77%),
    (title: '78', con: 78%),
    (title: '79', con: 79%),
    
    (title: '80', con: 80%),
    (title: '81', con: 81%),
    (title: '82', con: 82%),
    (title: '83', con: 83%),
    (title: '84', con: 84%),
    (title: '85', con: 85%),
    (title: '86', con: 86%),
    (title: '87', con: 87%),
    (title: '88', con: 88%),
    (title: '89', con: 89%),
    
    (title: '90', con: 90%),
    (title: '91', con: 91%),
    (title: '92', con: 92%),
    (title: '93', con: 93%),
    (title: '94', con: 94%),
    (title: '95', con: 95%),
    (title: '96', con: 96%),
    (title: '97', con: 97%),
    (title: '98', con: 98%),
    (title: '99', con: 99%),
    (title: '100',con: 100%),
);

/* 宽度  % */
@for $i from 1 through length($list)  {
    $item: nth($list, $i);
    $title : map-get($map: $item, $key: title );
    $con: map-get($map: $item, $key: con );
    .width-#{$title}{
        width: $con;
    }
}


/* 高度  rpx */
@for $i from 1 through 1000 {
    .h-#{$i} {
        height: $i + rpx;
    }
}

/* 高度  vh */
@for $i from 10 through 100 {
    .h-vh-#{$i} {
        height: $i + vh;
    }
}

/* 高度  % */
@for $i from 1 through length($list)  {
    $item: nth($list, $i);
    $title : map-get($map: $item, $key: title );
    $con: map-get($map: $item, $key: con );
    .height-#{$title}{
        height: $con;
    }
}


/* 最小高度  vh */
@for $i from 10 through 100 {
    .min-h-vh-#{$i} {
        min-height: $i + vh;
    }
}

/* 最大高度  vh */
@for $i from 10 through 100 {
    .max-h-vh-#{$i} {
        max-height: $i + vh;
    }
}


/* 行高  rpx */
@for $i from 1 through 1000 {
    .l-h-#{$i} {
        line-height: $i + rpx;
    }
}

/* 圆角  rpx */
@for $i from 0 through 200 {
    .b-r-#{$i} {
        border-radius: $i + rpx;
    }
}

/* 圆角  % */
@for $i from 1 through length($list)  {
    $item: nth($list, $i);
    $title : map-get($map: $item, $key: title );
    $con: map-get($map: $item, $key: con );
    .border-#{$title}{
        border-radius: $con;
    }
}

/* 透明度 */
@for $i from 10 through 100 {
    .opacity-#{$i} {
        opacity: $i/100;
    }
}

/* 文字大小 rpx */
@for $i from 10 through 100 {
    .font-#{$i} {
        font-size: $i + rpx;
    }
}

/* 文字间距  rpx */
@for $i from 1 through 80 {
    .letter-#{$i} {
        letter-spacing: $i + rpx;
    }
}


/* 字体 加粗 */
$weight: 100, 200, 300, 400,500,600,700,800,900,bold;
@each $i in $weight {
    .font-weight-#{$i} {
      font-weight:$i;
    }
}

/* 定位  */
.u-relative,
.u-rela {
    position: relative;
}

.u-absolute,
.u-abso {
    position: absolute;
}

.u-fixed{
    position: fixed;
}


/* 定位 top left bottom right */
@for $i from 0 through 100 {
    .pos-#{$i}{
        top: $i + rpx;
        left: $i + rpx;
        right: $i + rpx;
        bottom: $i + rpx;
    }
    .pos-t-#{$i} {
        top: $i + rpx;
    }
    .pos-l-#{$i} {
        left: $i + rpx;
    }
    .pos-r-#{$i} {
        right: $i + rpx;
    }
    .pos-b-#{$i} {
        bottom: $i + rpx;
    }
}

/* 层级 */
$Zindex:0,9, 99, 999;
@each $i in $Zindex {
    .z-#{$i} {
        z-index:$i;
    }
}


/* 文字 隐藏 */
.ellipsis-1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@for $i from 2 through 8 {
    .ellipsis-#{$i} {
        overflow: hidden;
        text-overflow: ellipsis;  /* 超出部分省略号 */
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: $i; /** 显示的行数 **/
    }
}


/* 文字 位置  */
$textpositionlist:[left,center,right,justify];
@each $i in $textpositionlist{
    .text-#{$i}{
        text-align:$i
    }
}

/*  
    文字 样式 
    none            定义标准的文本。
    underline       定义文本下的一条线。
    overline        定义文本上的一条线。
    line-through    定义穿过文本下的一条线。
    blink           定义闪烁的文本。
*/
$textpositionlist:[none,underline,overline,line-through,blink];
@each $i in $textpositionlist{
    .text-#{$i}{
        text-decoration:$i;
    }
}

/* overflow 
    visible 默认值。内容不会被修剪，会呈现在元素框之外。
    hidden  内容会被修剪，并且其余内容是不可见的。
    scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。
*/
$overflowlist:[visible,hidden,scroll,auto,inherit];
@each $i in $overflowlist{
    .over-#{$i}{
        overflow:$i;
    }
}