global.scss

/**
  * @description 通用全局样式
  * @author chenyakai
  * @version 0.0.1
  */

/*! variable */

$unit: px;
$font-size0: 14;
$step: 1;
$color-border: #e2e2e2;
$dirlist: top,
bottom,
left,
right;

/*! color */

$colors: (transparent, transparent),
    (white, white),
    (black, black),
    (333, #333),
    (666, #666),
    (999, #999);
@each $name,
$color in $colors {
    .color-#{$name} {
        color: $color;
    }
    .bgcolor-#{$name} {
        background-color: $color;
    }
}

/*! font-size */

.font-size-inherit {
    font-size: inherit;
}

@for $i from -10 through 30 {
    .font-size#{$i} {
        font-size: ($font-size0 + $i)#{$unit};
    }
}

/*! margin padding */

.marginXauto {
    margin-left: auto;
    margin-right: auto;
}

$i: 100;
@while $i>-1 {
    .margin#{$i}X {
        margin-top: #{$i}#{$unit};
        margin-bottom: #{$i}#{$unit};
    }
    .marginX#{$i} {
        margin-left: #{$i}#{$unit};
        margin-right: #{$i}#{$unit};
    }
    .padding#{$i}X {
        padding-top: #{$i}#{$unit};
        padding-bottom: #{$i}#{$unit};
    }
    .paddingX#{$i} {
        padding-left: #{$i}#{$unit};
        padding-right: #{$i}#{$unit};
    }
    $i: $i - $step;
}

$i: 100;
@while $i>-1 {
    @each $dir in $dirlist {
        .margin-#{$dir}#{$i} {
            margin-#{$dir}: #{$i}#{$unit};
        }
        .padding-#{$dir}#{$i} {
            padding-#{$dir}: #{$i}#{$unit};
        }
    }
    $i: $i - $step;
}

/*! border */

.border-none {
    border: none;
}

.border1 {
    border: 1#{$unit} solid $color-border;
}

.border1-transparent {
    border: 1#{$unit} solid transparent;
}

@each $dir in $dirlist {
    .border-#{$dir}1 {
        border-#{$dir}: 1#{$unit} solid $color-border;
    }
}

/*! border-radius */

.border-radius50 {
    border-radius: 50%;
}

.border-radius100 {
    border-radius: 100%;
}

$i: 20;
@while $i>-1 {
    .border-radius#{$i} {
        border-radius: #{$i}#{$unit};
    }
    $i: $i - 1;
}

/*! float */

.float-left {
    float: left;
}

.float-right {
    float: right;
}

/*! width */

.width25 {
    width: 25%;
}

.width33 {
    width: 33.3%;
}

.width50 {
    width: 50%;
}

.width100 {
    width: 100%;
}

/*! height */

.height100 {
    height: 100%;
}

/*! line-height */

$i: 100;
@while $i>0 {
    .line-height#{$i} {
        line-height: #{$i}#{$unit};
    }
    $i: $i - $step;
}

/*! display */

.block {
    display: block;
}

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

.display-none {
    display: none;
}

/*! position */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.translateX {
    left: 50%;
    transform: translateX(-50%);
}

.translateY {
    top: 50%;
    transform: translateY(-50%);
}

.translateXY {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

$i: 100;
@while $i>-100 {
    @each $dir in $dirlist {
        .#{$dir}#{$i} {
            #{$dir}: #{$i}#{$unit};
        }
    }
    $i: $i - $step;
}

/*! text-align */

.text-align-center {
    text-align: center;
}

.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}

/*! rotate */

.rotate90 {
    transform: rotate(90deg);
}

.rotate180 {
    transform: rotate(180deg);
}

/*! flex */

.flex {
    display: flex;
}

.flex1 {
    flex: 1
}

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

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

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

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

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

.flex-baseline {
    display: flex;
    align-items: baseline;
}

.flex-spacearound {
    display: flex;
    justify-content: space-around;
}

.flex-spacebetween {
    display: flex;
    justify-content: space-between;
}

.flex-align-spacearound {
    @extend .flex-align;
    @extend .flex-spacearound;
}

.flex-align-spacebetween {
    @extend .flex-align;
    @extend .flex-spacebetween;
}

.flex-baseline-spacearound {
    @extend .flex-baseline;
    @extend .flex-spacearound;
}

.flex-baseline-spacebetween {
    @extend .flex-baseline;
    @extend .flex-spacebetween;
}

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

.flex-baseline-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.flex-align-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

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

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

.flex-column-spacebetween {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.flex-column-spacearound {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.itemflex-00auto {
    flex: 0 0 auto;
}

.itemflex-11auto {
    flex: 1 1 auto;
}

/*! cursor */

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/*! justify */

.justify {
    text-align: justify;
    text-align-last: justify;
}

.justify:after {
    display: inline-block;
    content: '';
    width: 100%;
}

/*! opacity */

$i: 10;
@while $i>=0 {
    .opacity_#{$i} {
        opacity: 0.1 * $i;
    }
    $i: $i - 1;
}

/*! word-break */

.break-all {
    word-break: break-all;
}

.break-word {
    word-break: break-word;
}

/* white-space */

.pre-wrap {
    white-space: pre-wrap;
}

.nowrap {
    white-space: nowrap;
}

/*! scroll */

.scroll-x {
    overflow-x: scroll;
}

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

.scroll-auto {
    overflow: auto;
}

/* line */
.line-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@for $i from 1 through 10 {
    .line-limited#{$i} {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $i;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.line-through {
    text-decoration: line-through;
}

/*! other */

.bold {
    font-weight: bold;
}

.clear {
    overflow: hidden;
}

.clear-both {
    clear: both;
}

.inline-middle {
    display: inline;
    vertical-align: middle;
}

.border-box {
    box-sizing: border-box;
}

.visibility-visible {
    visibility: visible;
}

.visibility-hidden {
    visibility: hidden;
}

reset.scss

/**
  * @description 样式初始化demo
  */

* {
    box-sizing: border-box;
    transition: width 2s;
    -moz-transition: width 2s;
    -webkit-transition: width 2s;
    -o-transition: width 2s;
}

body {
    @extend .font-size0;
    font-family: "PingFangSC-Regular", "microsoft yahei", "Arial"!important;
    background-color: #f6f6f6;
}

input{
    outline: none;
}

button {
    border: none;
    background: none;
    outline: none;
}

ul,
li {
    list-style: none;
    box-sizing: border-box;
}

i {
    display: inline-block;
    font-style: normal;
}

a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
    background: none;
}

variable.scss

/**
  * @description 色值样式demo
  */

/* 本项目色值 */
$color-theme: #32AE57;
$color-theme-text: #16953C;
$color-orange: #FF7B35;
$color-orange-light: #FFefe5;

$colors:
(theme, $color-theme),
(theme-text, $color-theme-text),
(orange, $color-orange),
(orange-light, $color-orange-light),
(ddd, #ddd),
(b2, #B2B2B2),
(f6, #f6f6f6);

@each $name,
$color in $colors {
    .color-#{$name} {
        color: $color;
    }
    .bgcolor-#{$name} {
        background-color: $color;
    }
}

icon.scss

/**
  * @description 图片图标样式demo
  */

$theicons:
  (follow, 28, 28),
  (pay, 40, 40),
  (myfocus, 44, 44);

@each $icon, $width, $height in $theicons {
    .theicon-#{$icon} {
        display: inline-block;
        width: #{$width}px;
        height: #{$height}px;
        background: url(../images/icon/#{$icon}.png) no-repeat;
        background-size: 100% 100%;
    }
}

main.scss

/**
  * @description 项目级公用样式demo
  */

/* 自定义小程序原生组件样式 */
.wx-switch-input{
    width:94rpx !important;
    height:54rpx !important;
    background-color: $color-theme !important;  // 选中背景
    &::before{  // 未选中背景
        width:94rpx !important;
        height:54rpx !important;
        background-color: #DDDDDD !important;
    }
    &::after{  // 圆圈
        width:50rpx !important;
        height:50rpx !important;
    }
}

.input-placeholder {
    color: #DDDDDD;
}

/* 自定义van组件样式 */
.custom-search {
    background: #fff!important;
    .van-cell {
        background: #f6f6f6;
        border-radius: 8rpx;
    }
}
.van-popup__overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.van-icon {
    font-family: vant-icon !important;
}

/* 项目公共样式 */
@mixin tag-keyword($color, $bdcolor) {
    display: inline-block;
    padding: 8rpx 28rpx;
    color: $color;
    border: 2rpx solid $bdcolor;
    border-radius: 200rpx;
}
.keywords {
    @include tag-keyword(#32AE57, rgba(50,174,87,0.60));
}
.keywords-uncheck {
    @include tag-keyword(#333333, #DDDDDD);
}

sass_index.scss

/**
  * @description 样式输出
  */

@import "reset";
@import "variable";
@import "global";
@import "icon";
@import "main";