scss使用

*{padding:0;margin:0;box-sizing:border-box;}
$primary: #409EFF;
$primary-hover: #66b1ff;
$primary-active: #3a8ee6;
$font-size:12px;
$border-radius:4px;
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$map: (
  'xs' : (max-width: $--sm - 1),/*最大767*/
  'sm' : (min-width: $--sm),/*最小768*/
  'md' : (min-width: $--md),/*最小992*/
  'lg' : (min-width: $--lg),/*最小1200*/
  'xl' : (min-width: $--xl)/*最小1920*/
);
//定义一个方法
@mixin res($key){
  //仅在哪个屏下，map-get去映射表里取值，从$map这个表里取key，用inspect解析
  @media only screen and #{inspect(map-get($map,$key))} {
    @content;//插槽，把传入的东西放进来
  }
}

//其他.vue文件引入
@import '../styles/ss.scss';
$height:42px;
$font-size:16px;
$color:#606266;
$border-color:#dcdfe6;
$background:#ecf5ff;
$active-color:#3a8ee6;
.my-button{
    border-radius: $border-radius;
    border:1px solid $border-color;
    height:$height;
    display:inline-flex;
    justify-content: center;
    vertical-align: middle;
    user-select:none;/*不可选中*/
    &:hover{
        border-color:$border-color;
        background-color: $background;
    }
    &:focus,&:active{
        color:$active-color;
        outline:none;/*外面的边框*/
    }
    /*循环加样式 $type对应primary是key，$color对应$primary是值*/
    @each $type,$color in (primary:$primary,success:$success,info:$info,warning:$warning,danger:$danger){
        &-#{$type}{
            background:#{$color};
            border:1px solid #{$color};
            color:#fff;
            fill:#fff;
        }
    }
    @each $type,$color in (primary:$primary-hover,success:$success-hover,info:$info-hover,warning:$warning-hover,danger:$danger-hover){
        &-#{$type}:hover{
            background:#{$color};
            border:1px solid #{$color};
            color:#fff;
        }
    }
    .icon{width:16px;height:16px;}
    /*icon后面有span时给span加的样式*/
    .icon+span{
        margin-left: 4px;
    }
    &-left{
        svg{order:1};
        span{order:2};
    }
    &-right{
        svg{order:2};
        span{order:1;};
        .icon+span{margin-left:0px;margin-right:4px;}
    }
    /*属性选择器，有这个属性时样式生效*/
    &[disabled]{
        cursor:not-allowed;//不可用
    } 
}
.my-button-group{
    display:inline-flex;
    vertical-align:middle;
    button{
        position:relative;
        border-radius:0;
        /*不是第一个*/
        &:not(first-child){margin-left:-1px;}
        /*第一个*/
        &:first-child{
            border-top-left-radius:$border-radius;
            border-bottom-left-radius:$border-radius;
        }
        /*最后一个*/
        &:last-child{
            border-top-right-radius:$border-radius;
            border-bottom-right-radius:$border-radius;
        }
        /*提高层级*/
        &:hover{z-index:1}
        &:focus{z-index:2}
    }
}

.my-row{
    display:flex;
    flex-wrap: wrap;
}
.my-col{
    box-sizing: border-box;
}
/*scss的for循环，从1到24*/
@for $i from 0 through 24{
    .my-col-#{$i} {
        width:$i/24 * 100%;
    }
    .my-col-offset-#{$i} {
        margin-left:$i/24 * 100%;
    }
}
@include res(xs){//sm,md,lg,xl做法相同
    @for $i from 1 through 24{
        .my-col-xs-#{$i}{
            width:$i/24*100%;
        }
        .my-col-xs-offset-#{$i}{
            width:$i/24*100%;
        }
    }
}

.my-container {
    display:flex;
    flex-direction:row;
    flex:1;/*占满整个容器，独立撑满*/
}
.my-container.isVertical {
    flex-direction:column;
}
.my-main{
    flex:1;/*占满整个容器，独立撑满*/
    padding:20px;
}

.my-input{
    display:inline-flex;
    position:relative;
    input{
        padding:8px;
        width:150px;
        height:42px;
        border-radius:$border-radius;
        border:1px solid #dcdfe6;
        &:focus{
            border:1px solid $primary;
            outline:none;
            box-shadow:inset -1px 0px 2px $primary,inset 1px 1px 1px $primary;//阴影
        }
        &[disabled]{/*有这个属性时样式生效*/
            cursor:not-allowed;
        }
    }
}
.my-input-suffix-icon{
    input{
        padding-right:25px;
    }
    .my-icon{
        width:16px;
        height:16px;
        position:absolute;
        right:8px;
        top:13px;
        cursor:pointer;
    }
}