开发中scss的封装

1. 前言

• 在实际开发中，我们可以定义一些公共样式在全局使用，此篇文章记录在开发者使用的scss，将会持续更新中……
• 两个比较好用的将sass转化为css的网站
  • www.sassmeister.com/
  • www.wetools.com/sass-to-css

2.定义代码显示的行数，超出使用...代替

@for $i from 1 through 10 {
  // text-cut-1 限制1行显示...
  // text-cut-2 限制2行显示...
  .text-cut-#{$i} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
  }
}

3. 设置字体大小的样式

@for $i from 0 to 100 {
  .f-s-#{$i} {
    font-size: $i + rpx;
  }
}

4. 设置边框圆角

@for $i from 0 to 100 {
  //边框圆角 u-br-10 得出：border-radius : 10rpx;
  .u-br-#{$i} {
    border-radius: $i + rpx !important;
  }
  //左上边框圆角 u-br-t-l-10 得出：border-top-left-radius : 10rpx;
  .u-br-t-l-#{$i} {
    border-top-left-radius: $i + rpx;
  }
  //右上边框圆角 u-br-t-r-10 得出：border-top-right-radius : 10rpx;
  .u-br-t-r-#{$i} {
    border-top-right-radius: $i + rpx;
  }
  //左下边框圆角 u-br-b-l-10 得出：border-bottom-left-radius : 10rpx;
  .u-br-b-l-#{$i} {
    border-bottom-left-radius: $i + rpx;
  }
  //右下边框圆角 u-br-b-r-10 得出：border-bottom-right-radius : 10rpx;
  .u-br-b-r-#{$i} {
    border-bottom-right-radius: $i + rpx;
  }
}

5. 定义内外边距

@for $i from 0 through 200 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 定义字体(rpx)单位，大于或等于10的都为rpx单位字体
    // u-font-10 得出：font-size : 10rpx;
    .u-font-#{$i} {
      font-size: $i + rpx !important;
    }
    // u-m-10 得出：margin : 10rpx;
    .u-m-#{$i} {
      margin: $i + rpx !important;
    }
    // u-p-10 得出：padding : 10rpx;
    .u-p-#{$i} {
      padding: $i + rpx !important;
    }
    // Jane：@each 指令的格式是 $var in <list>, $var 可以是任何变量名， <list> 是一连串的值，也就是值列表。
    @each $short, $long in (t top, r right, b bottom, l left) {
      /**
       * 定义外边距
       * u-m-t-10 得出：margin-top : 10rpx;
       * u-m-r-10 得出：margin-right : 10rpx;
       * u-m-b-10 得出：margin-bottom : 10rpx;
       * u-m-l-10 得出：margin-left : 10rpx;
       */
      .u-m-#{$short}-#{$i} {
        margin-#{$long}: $i + rpx !important;
      }
      /**
       * 定义内边距
       * u-p-t-10 得出：padding-top : 10rpx;
       * u-p-r-10 得出：padding-right : 10rpx;
       * u-p-b-10 得出：padding-bottom : 10rpx;
       * u-p-l-10 得出：padding-left : 10rpx;
       */
      .u-p-#{$short}-#{$i} {
        padding-#{$long}: $i + rpx !important;
      }
    }
    @each $short, $long, $short1, $long1 in (t top b bottom, l left r right) {
      /**
       * 定义外边距
       * u-m-t-b-10 得出：margin-top : 10rpx; margin-bottom : 10rpx;
       * u-m-l-r-10 得出：margin-left : 10rpx; margin-right : 10rpx;
       */
      .u-m-#{$short}-#{$short1}-#{$i} {
        margin-#{$long}: $i + rpx !important;
        margin-#{$long1}: $i + rpx !important;
      }
      /**
       * 定义内边距
       * u-p-t-b-10 得出：padding-top : 10rpx; padding-bottom : 10rpx;
       * u-p-l-r-10 得出：padding-left : 10rpx; padding-right : 10rpx;
       */
      .u-p-#{$short}-#{$short1}-#{$i} {
        padding-#{$long}: $i + rpx !important;
        padding-#{$long1}: $i + rpx !important;
      }
    }
  }
}

6. 字体粗细程度(2024/05/09更新)

// 字体粗细程度 
@each $i in 200, 300, 400, 500, 600, 700, 800, 900 {
	.u-font-#{$i} {
		font-weight: $i;

		.u-count-num {
			font-weight: $i !important;
		}
	}
}

7. flex弹性布局(2024/05/09更新)

// flex弹性布局
.flex {
	display: flex;

	&-column {
		flex-direction: column;
	}

	&-wrap {
		flex-wrap: wrap;
	}

	&-basis-xs {
		flex-basis: 20%;
	}

	&-basis-sm {
		flex-basis: 40%;
	}

	&-basis-df {
		flex-basis: 50%;
	}

	&-basis-lg {
		flex-basis: 60%;
	}

	&-basis-xl {
		flex-basis: 80%;
	}
}
.align {
	&-start {
		align-items: flex-start;
	}

	&-end {
		align-items: flex-end;
	}

	&-center {
		align-items: center;
	}

	&-stretch {
		align-items: stretch;
	}
}

.self{
	&-start {
		align-self: flex-start;
	}

	&-center {
		align-self: center;
	}

	&-end {
		align-self: flex-end;
	}

	&-stretch {
		align-self: stretch;
	}
}

.justify{
	&-start {
		justify-content: flex-start;
	}

	&-end {
		justify-content: flex-end;
	}

	&-center {
		justify-content: center;
	}

	&-between {
		justify-content: space-between;
	}

	&-around {
		justify-content: space-around;
	}
}