vue中sass样式的引用和定义全局样式(一)

vue中sass样式的引用和定义全局样式(一)

效果

代码

<template>
  <div class="container">
      <div class="w-18 color-f5222d color-1890ff-bg height-50 fs-30 weight-700" 
           style="border:3px solid #333">哈哈哈
     </div>
   </div>
</template>
<script>
export default {};
</script>
<style scoped lang="less">
</style>

使用流程，如下：

1、package.json中，安装依赖包

在package.json中

    "devDependencies": {
        "sass": "^1.26.5",
        "sass-loader": "^8.0.1"
    }

然后 npm i

2、在main.js或main.ts中进行引入

//全局样式
import '@/assets/styles/App.scss';

3、样式文件结构

1、src/assets/styles/App.scss

@import "./lib/element-variables";
@import "./lib/reset";
@import './lib/ContentMixin';
@import './lib/FontSize';
@import "./lib/common";

2.1、src/assets/styles/lib/reset.scss

全局公用样式

body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
pre,
div {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style-type: none;
}

select,
input,
img,
select {
  vertical-align: middle;
}

/*p span 自动换行*/
p, span {
  word-break: break-all;
}

html,
body {
  height: 100vh;
  min-height: 100vh;
}

html {
  overflow: hidden;
}

body {
  color: $color-font;
  line-height: 22px;
  font-size: 12px;
  font-family: 'PingFangSC-Regular', 'Microsoft YaHei', 'Helvetica', 'sans-serif';
  background: #f0f2f5;
  padding: 0 !important; //处理点击弹窗时右侧出现留白问题
}

a {
  text-decoration: none;
}

a:link {
  color: $main-color;
}

a:visited {
  color: $main-color-light;
}

a:hover,
a:active,
a:focus {
  color: $main-color;
}
/*在谷歌下移除input[number]的上下箭头*/
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

/*在firefox下移除input[number]的上下箭头*/
input[type="number"] {
  -moz-appearance: textfield;
}


.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  *zoom: 1;
  /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

2.2、src/assets/styles/lib/ContentMixin.scss

scss样式混合器——生成动态样式（宽高、边距）

/**
margin/padding类生成器；步长为2生成2~50的步长类
引用: @import './lib/ContentMixin.scss';
引用后自动生成相关class类
.mt-2~.mt-50 上边距
.mb-2~.mb-50 下边距
.ml-2~.ml-50 左边距
.mr-2~.mr-50 右边距
.mlr-2~.mlr-50 上下为0,设置左右边距
.pt-2~.pt-50 上内边距
.pb-2~.pb-50 下内边距
.pl-2~.pl-50 左内边距
.pr-2~.pr-50 右内边距
.plr-2~.plr-50 上下为0,设置左右内边距
.ptb-2~.ptb-50 左右为0,设置上下内边距
.padding-2~.padding-50 上下左右内边距

用法: <div class="mt-20 plr-30"></div>
解读：div 外边距top为20，内边距left,right均为30
**/
$length: 100;

@mixin create-ctx-style($len) {
  .mt-#{$len} {
    margin-top: 1px * $len !important;
  }
  .ml-#{$len} {
    margin-left: 1px * $len !important;
  }
  .mr-#{$len} {
    margin-right: 1px * $len !important;
  }
  .mb-#{$len} {
    margin-bottom: 1px * $len !important;
  }
  .mlr-#{$len} {
    margin: 0 1px * $len !important;
  }
  .mtb-#{$len} {
    margin: 1px * $len 0 !important;
  }
  .pt-#{$len} {
    padding-top: 1px * $len !important;
  }
  .pl-#{$len} {
    padding-left: 1px * $len !important;
  }
  .pr-#{$len} {
    padding-right: 1px * $len !important;
  }
  .pb-#{$len} {
    padding-bottom: 1px * $len !important;
  }
  .plr-#{$len} {
    box-sizing: border-box;
    padding-left: 1px * $len !important;
    padding-right: 1px * $len !important;
  }
  .ptb-#{$len} {
    box-sizing: border-box;
    padding: 1px * $len 0 !important;
  }
  .padding-#{$len} {
    box-sizing: border-box;
    padding: 1px * $len !important;
  }
}

@while $length>=0 {
  @include create-ctx-style($length);
  $length: $length - 2;
}

/*1-1000*/
$local: 1000;

@while $local >=0 {
  .h-#{$local} {
    height: 1% * $local !important;
  }

  /*高度px*/
  .height-#{$local} {
    height: 1px * $local !important;
  }

  /*宽度度百分比*/
  .w-#{$local} {
    width: 1% * $local !important;
  }

  /*宽度px*/
  .width-#{$local} {
    width: 1px * $local !important;
  }

  $local: $local - 1
}

2.3、src/assets/styles/lib/FontSize.scss

scss样式混合器——生成动态字体

/**
字号大小类生成器；步长为2，生成10~50的偶数字号
.fs-10~fs-50
用法：<div class="fs-30"></div>
解读：给div设置font-size=30px
**/
$max-size: 50;

@while $max-size >= 10 {
    .fs-#{$max-size} {
        font-size: 1px * $max-size !important;
    }

    $max-size: $max-size - 2;
}

$weight: 900;

/**
字号加粗类生成器；步长为100，生成100~900的加粗值
.fs-10~fs-50
用法：<div class="weight-700"></div>
解读：给div设置font-weight=700
**/



@while $weight > 0 {
    .weight-#{$weight} {
        font-weight: $weight !important;
    }

    $weight: $weight - 100;
}