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;
}
}
网友评论