vue和uniapp公共样式

vue使用less

reset.less

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}
button,
input,
select,
textarea {
  margin: 0;
}
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
img,
video {
  height: auto;
  max-width: 100%;
}
iframe {
  border: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
td:not([align]),
th:not([align]) {
  text-align: left;
}
i {
  font-style: normal;
}

theme.less

// less变量
@black: #000;
@white: #fff;
@gray-1: #333;
@gray-2: #666;
@gray-3: #999;
@gray-4: #eee;
@gray-5: #f8f8f8;

@red: #E91010;
@yellow:#FB8D32;
@blue: #2E93FF;

// border
@border-color: @gray-4;
@border-width-base: 1px;

common.less

@import './reset.less';
@import './theme.less';

html, body {
  height: 100%;
}
//pc
// .w{
//   width: 1280px;
//   margin: auto;
// }
// a {
//   color: inherit;
// }

// Color
@colors: black, white, gray-1, gray-2, gray-3, gray-4, red, blue,yellow;

each(@colors, {
  .@{value} {
    color: @@value;
  }
});
each(@colors, {
  .bg-@{value} {
    background-color: @@value;
  }
});

each(range(10,100,2), {
  .size-@{value} {
    font-size: @value*1px;
  }
})
each(range(5,30,5), {
  .radius-@{value} {
    border-radius: @value*1px;
  }
})
each(range(100), {
  .pd-@{value}, .ptb-@{value}, .pt-@{value} { padding-top: @value*1px; }
  .pd-@{value}, .ptb-@{value}, .pb-@{value} { padding-bottom: @value*1px; }
  .pd-@{value}, .plr-@{value}, .pl-@{value} { padding-left: @value*1px; }
  .pd-@{value}, .plr-@{value}, .pr-@{value} { padding-right: @value*1px; }
  .mg-@{value}, .mtb-@{value}, .mt-@{value} { margin-top: @value*1px; }
  .mg-@{value}, .mtb-@{value}, .mb-@{value} { margin-bottom: @value*1px; }
  .mg-@{value}, .mlr-@{value}, .ml-@{value} { margin-left: @value*1px; }
  .mg-@{value}, .mlr-@{value}, .mr-@{value} { margin-right: @value*1px; }
})

.bg{
  background-color:@gray-5;
}

.bold {
  font-weight: 700;
}

//border
.bt {
  border-top: @border-width-base / 2 solid @border-color;
}
.br {
  border-right: @border-width-base / 2 solid @border-color;
}
.bb {
  border-bottom: @border-width-base / 2 solid @border-color;
}
.bl {
  border-left: @border-width-base / 2 solid @border-color;
}
.border{
  border: @border-width-base / 2 solid @border-color;
}


// utils
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.fixed-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
}
.inline-block {
  display: inline-block;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.autowrap {
  word-wrap: break-word;
  word-break: normal;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.over-hidden {
  overflow: hidden !important;
}

.scroll-y {
  overflow-y: auto;
}

// 小曲的样式
.min100{
  min-height: 100vh;
}
.w100{
  width: 100%;
}
.h100{
  height: 100%;
}
.line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 两行超出显示省略号 */

.line-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

//flex
.flex {
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.flex_l {
  justify-content: flex-start;
  display: flex;
  align-items: center;
}

.flex_r {
  justify-content: flex-end;
  display: flex;
  align-items: center;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex1 {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

.flex::before,
.flex::after,
.flex-inline::before,
.flex-inline::after {
  display: none;
}

.flex-left {
  justify-content: flex-start;
}
.flex-center {
  justify-content: center;
}
.flex-right {
  justify-content: flex-end;
}
.flex-between {
  justify-content: space-between;
}
.flex-around {
  justify-content: space-around;
}

.flex-stretch {
  align-items: stretch;
}
.flex-top {
  align-items: flex-start;
}
.flex-middle {
  align-items: center;
}
.flex-bottom {
  align-items: flex-end;
}

.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column {
  flex-direction: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}


each(range(12), {
  .flex-@{value} {
    flex: @value;
  }
});

uniapp使用scss

uni.scss

/* uni.scss */
@import 'uview-ui/theme.scss';

/* 颜色变量 */
$bg:#f8f8f8;
$bg-1:#ccc;
$blue:#0072FF;
$white:#fff;
$yellow:#FF9900;
$red:#FE0000;
// $yellow:#F59E12;
$gray:#333;
$gray-1:#666;
$gray-2:#999;


/* 边框border */
$border-width-base:1rpx;
$border-color:#f8f8f8;
$radius:5rpx;

common.scss

/* 颜色 */
.red{
	color:$red;
}
.blue{
	color: $blue;
}
.white{
	color:$white;
}
.yellow{
	color:$yellow;
}
.gray{
	color:$gray;
}
.gray-1{
	color:$gray-1;
}
.gray-2{
	color:$gray-2;
}
.bg{
	background-color: $bg;
}
.bg-white{
	background-color: $white;
}
.bg-blue{
	background-color: $blue;
}
.bg-yellow{
	background-color:$yellow;
}


/* flex */
.center{
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex1{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex_l{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.flex_r{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.flex{
	display: flex;
}
.flex-center{
	justify-content: center;
}
.flex-around{
	justify-content: space-around;
}
.flex-between{
	justify-content: space-between;
}
.flex-top{
	align-items: flex-start;
}
.flex-middle{
	align-items: center;
}
.flex-bottom{
	align-items: flex-end;
}
.flex-column{
	flex-direction: column;
}
.flex-wrap{
	flex-wrap: wrap;
}

/* 边框 */
.bt {
  border-top: $border-width-base solid $border-color;
}
.bb {
  border-bottom: $border-width-base solid $border-color;
}
.bl {
  border-left: $border-width-base solid $border-color;
}
.br {
  border-right: $border-width-base solid $border-color;
}
.border{
	 border: $border-width-base solid $gray-2;
}

.border-yellow{
	 border: $border-width-base solid $yellow;
}



/* 全屏 */
.vw100 {
  width: 100vw !important;
}
.vh100 {
  height: 100vh !important;
}
.min100 {
  min-height: 100vh !important;
}
.h100 {
  height: 100% !important;
}
.w100 {
  width: 100% !important;
}

/* 其他 */
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}
.fixed{
	position: fixed;
}
.fixed-bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
.block{
	display: block;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.autowrap {
  word-wrap: break-word;
  word-break: normal;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.bold {
  font-weight: 600;
}
.over-hidden {
  overflow: hidden;
}
.bold{
	font-weight: 700;
}

/* uview内置样式 */
/* u-line-1,u-line-2  一行省略 */
/* u-font-26  x>= 20 && x <= 40时，表现为rpx性质 */
/* 
u-padding-x == u-p-x
u-padding-left-x == u-p-l-x
u-padding-top-x == u-p-t-x
u-padding-right-x == u-p-r-x
u-padding-bottom-x == u-p-b-x
u-margin-x == u-m-x
u-margin-left-x == u-m-l-x
u-margin-top-x == u-m-t-x
u-margin-right-x == u-m-r-x
u-margin-bottom-x == u-m-b-x 
取值范围：
1-80(可以等于80)之间的偶数(双数) 和 5的倍数
*/

/* 
 .u-flex-1 {
 	flex: 1; 取值范围 1~12
 }
 */
// padding margin
@for $value from 1 through 100{
  .pd-#{$value}, .ptb-#{$value}, .pt-#{$value} { padding-top: $value*1rpx; }
  .pd-#{$value}, .ptb-#{$value}, .pb-#{$value} { padding-bottom: $value*1rpx; }
  .pd-#{$value}, .plr-#{$value}, .pl-#{$value} { padding-left: $value*1rpx; }
  .pd-#{$value}, .plr-#{$value}, .pr-#{$value} { padding-right: $value*1rpx; }
  .mg-#{$value}, .mtb-#{$value}, .mt-#{$value} { margin-top: $value*1rpx; }
  .mg-#{$value}, .mtb-#{$value}, .mb-#{$value} { margin-bottom: $value*1rpx; }
  .mg-#{$value}, .mlr-#{$value}, .ml-#{$value} { margin-left: $value*1rpx; }
  .mg-#{$value}, .mlr-#{$value}, .mr-#{$value} { margin-right: $value*1rpx; }
}

// size
@for $value from 20 through 50{
  .size-#{$value}{ font-size: $value*1rpx; }
}
// radius
@for $value from 5 through 20{
  .radius-#{$value}{ border-radius: $value*1rpx; }
}