前端CSS通用、公共样式

Css 通用、公共样式

需要安装 sass 预处理器

npm install sass-loader --save-dev
npm install node-sass --save-dev

新建 common.scss 文件

// 定义颜色
$main-color: #333333;
$content-color: #606266;
$tips-color: #909399;
$border-color: #e4e7ed;

html,
body {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: $main-color;
}

html, body, div, ul, li, dl, dt, dd, button, table, tbody, thead, tfoot, tr, td, th,
input, textarea, nav, header, footer, menu, section, aside, article, details, form, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  &::after {
    box-sizing: border-box;
  }

  &::before {
    box-sizing: border-box;
  }
}
a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.text-bold {
  font-weight: bold;
}

.flex {
  display: flex;
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

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

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

.flex-shrink-0 {
  flex-shrink: 0;
}

.ai-center {
  align-items: center;
}

.ai-start {
  align-items: flex-start;
}

.ai-end {
  align-items: flex-end;
}

.jc-center {
  justify-content: center;
}

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

.jc-end {
  justify-content: flex-end;
}

.jc-between {
  justify-content: space-between;
}

.jc-around {
  justify-content: space-around;
}

.flex-elps {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  width: 0;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

// 卡片样式
.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.08);
  padding: 10px 0 27px;
  overflow: hidden;

  & .card-header {
    display: flex;
    padding: 0 14px 10px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $border-color;

    & .header-title {
      font-size: 16px;
    }

    & .header-other {
      font-size: 14px;
      color: #409eff;
    }
  }

  & .card-content {
    padding: 8px 14px 0;
  }
}

// 遮罩层 默认 fixed 定位如果需根据父元素大小加上 abso 即可
.mask-wrapper {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.45);
}

// 垂直水平居中
.pos-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// 边框
.border {
  border: 1px solid $border-color;

  @each $short, $long in l left, t top, r right, b bottom {
    // 缩写版，结果如： border-l
    &-#{$short} {
      border-#{$long}: 1px solid $border-color;
    }
  }
}

// 框的类型
@each $short, $long in i inline, b block, ib inline-block {
  .ds-#{$short} {
    display: $long;
  }
}

// 定位类型
@each $short, $long in rela relative, abso absolute, fixed fixed {
  .#{$short} {
    position: $long;
  }
}

// 文字对齐方式
@each $k in left, center, right {
  .text-#{$k} {
    text-align: $k;
  }
}

// 定义字体(px)单位，大于或等于12的都为px单位字体
@each $i in (12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50) {
  .fs-#{$i} {
    font-size: $i + px;
  }
}

// 定义文字行数
@for $i from 1 through 3 {
  .text-wrap-#{$i} {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: $i;
    word-break: break-all;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
  }
}

// 定义flex等分
@for $i from 0 through 12 {
  .flex-#{$i} {
    flex: $i;
  }
}

// 定义内外边距，历遍0-80
@each $i in (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80) {
  // 得出：margin-30或者m-30
  .m-#{$i} {
    margin: $i + px;
  }

  .my-#{$i} {
    margin-top: $i + px;
    margin-bottom: $i + px;
  }

  .mx-#{$i} {
    margin-left: $i + px;
    margin-right: $i + px;
  }

  // 得出：padding-30或者p-30
  .p-#{$i} {
    padding: $i + px;
  }

  .py-#{$i} {
    padding-top: $i + px;
    padding-bottom: $i + px;
  }

  .px-#{$i} {
    padding-left: $i + px;
    padding-right: $i + px;
  }

  @each $short, $long in l left, t top, r right, b bottom {
    // 缩写版，结果如： m-l-30
    // 定义外边距
    .m#{$short}-#{$i} {
      margin-#{$long}: $i + px;
    }

    // 定义内边距
    .p#{$short}-#{$i} {
      padding-#{$long}: $i + px;
    }

    // bottom left rigth top
    .#{$short}-#{$i} {
      #{$long}: $i + px;
    }
  }
}

引入 common.scss 文件

@import  "./common.scss";

使用/示例

<div style="width: 500px;height: 100px;background-color: #F56C6C;" class="mb-10">margin-bottom</div>
<div style="width: 500px;height: 500px;background-color: #409EFF;" class="rela mb-10">
	<div class="text-wrap-1 mt-10">文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号文字显示省略号</div>
	<div class="pos-center" style="width: 100px;height: 100px;background-color: #FFA500;">居中 DIV</div>
</div>

<div style="width: 500px" class="card">
	<div class="card-header">
		<span class="header-title">标题</span>
		<span class="header-other">更多</span>
	</div>
	<div class="card-content">
		<div>内容</div>
		<div>内容</div>
		<div>内容</div>
		<div>内容</div>
		<div>内容</div>
		<div>内容</div>
	</div>
</div>

------------------------------------------------------------------------------ End