在vue 或React 中 使用Scss来进行提高布局速度

在Scss大火的今天无论时React 还是Vue 都会使用Scss来作为提高开发效率的一种手段

1.左右布局快速开发

在布局中左右布局是非常常见的一种模式，要使用一下方式快速布局首先要满足于两个条件,在满足以上条件后可以在子级使用 Padding 来任意调整位置

1. 父级盒子的宽度必须要确定

2. 子级宽度需要传入Px值或者百分比

@mixin LAndRLayout($width, $height:auto){
  display:inline-block;
  width:$width;
  height: $height;
  box-sizing:border-box;
  vertical-align: middle;
}

2.块级文字居中前提是必须是块级

@mixin AutoCenter($width:auto, $height:auto){
  width: $width;
  height:$height;
  line-height:$height;
}

3.文字超过n行进行省略

@mixin overFlowNUm($num:2){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp:$num;
  -webkit-box-orient:vertical;
}

4.文字超出进行省略

@mixin overFlow{
  overflow:hidden; //超出的文本隐藏
  text-overflow:ellipsis; //溢出用省略号显示
  white-space:nowrap; //溢出不换行
}

5.禁止选择中文本的同时鼠标出现小手

@mixin Mouse{
  user-select:none;
  cursor:pointer;
}

6.滚动条样式

@mixin ScrollBar{
  ::-webkit-scrollbar {
    width:5px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 5px;
    height: 10px;
    background: rgba(175,189,223,0.2);
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 10px;
    background: rgba(142, 143, 145, 0.8);
  }
  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(169, 169, 169, 0.4);
  }
}

7.使用rem自适应

$vw_fontsize: 192;
@function rem($px) {
  @return ($px / $vw_fontsize) * 1rem;
}
//一种计算方式
// 根元素大小使用 vw 单位
$vw_design: 1920;
html {
  font-size: ($vw_fontsize / $vw_design) * 100vw;//10vw
  // 同时，通过Media Queries 限制根元素最大最小值
  @media screen and (max-width: 980px) {
    font-size: 98px;
  }
}

// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
$min_width: 1024px;
body {
  // max-width: 1920px;
  min-width: $min_width;
}

@mixin inlineBlock($width,$height,$loc:center,$lneHgt:auto){
      width:$width;
      height:$height;
      display: inline-block;
      text-align: $loc;
      line-height: $height;
}
//块级盒子居中不会影响父元素,不兼容IE7及以下
@mixin boxCenter{
    display: table;
    margin: 0 auto;
}
//块级盒子可以做到水平垂直多行文字居中，
  把当前属性设置给父元素在设置子元素设置 display: inline-block.
@mixin boxHorAndVerCenter{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}