vue_cli样式--使用scss

Posted 2021-05-18 码妈

vue_cli中样式

• vue_cli中使用scss

vue_cli中使用scss

新建一个css文件夹，再新建variable.scss文件、minix.scss文件、reset.scss文件、base.scss文件
在variable.scss文件中，定义scss变量

// 这个文件管理定义的scss变量
//字体定义规范
$font_samll:12Px;
$font_medium_s:13Px;
$font_medium:15Px;
$font_large:17Px;

// 背景颜色规范(主要)
$background-color-theme: #d43c33;//背景主题颜色默认(网易红)
$background-color-theme1: rgba(34,213,156,1);//背景主题颜色1(QQ绿)
$background-color-theme2: #333;//背景主题颜色2(夜间模式)

// 背景颜色规范(次要)
$background-color-sub-theme: #f5f5f5;//背景主题颜色默认(网易红)
$background-color-sub-theme1: #f5f5f5;//背景主题颜色1(QQ绿)
$background-color-sub-theme2: #444;//背景主题颜色2(夜间模式)

// 字体颜色规范(默认)
$font-color-theme : #666;//字体主题颜色默认(网易)
$font-color-theme1 : #666;//字体主题颜色1(QQ)
$font-color-theme2 : #ddd;//字体主题颜色2(夜间模式)

// 字体颜色规范(激活)
$font-active-color-theme : #d43c33;//字体主题颜色默认(网易红)
$font-active-color-theme1 : rgba(34,213,156,1);//字体主题颜色1(QQ绿)
$font-active-color-theme2 : #ffcc33;//字体主题颜色2(夜间模式)

// 边框颜色
$border-color-theme : #d43c33;//边框主题颜色默认(网易)
$border-color-theme1 : rgba(34,213,156,1);//边框主题颜色1(QQ)
$border-color-theme2 : #ffcc33;//边框主题颜色2(夜间模式)

在minix.scss文件中，定义scss混合

@import "./variable.scss";

// 这个文件定义scss混合
/*根据dpr计算font-size*/
@mixin font_dpr($font-size){
  font-size: $font-size;
  [data-dpr="2"] & { font-size: $font-size * 2;}
  [data-dpr="3"] & { font-size: $font-size * 3;}
}
/*通过该函数设置字体大小，后期方便统一管理；*/
@mixin font_size($size){
  @include font_dpr($size);
}
// 不换行
@mixin no-wrap(){
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
// 限制行数
@mixin clamp($row){
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:$row;
}

// 根据属性选择器来设置背景颜色
@mixin bg_color(){
  background: $background-color-theme;
  [data-theme=theme1] & {
    background: $background-color-theme1;
  }
  [data-theme=theme2] & {
    background: $background-color-theme2;
  }
}
@mixin bg_sub_color(){
  background: $background-color-sub-theme;
  [data-theme=theme1] & {
    background: $background-color-sub-theme1;
  }
  [data-theme=theme2] & {
    background: $background-color-sub-theme2;
  }
}

@mixin font_color(){
  color: $font-color-theme;
  [data-theme=theme1] & {
    color: $font-color-theme1;
  }
  [data-theme=theme2] & {
    color: $font-color-theme2;
  }
}
@mixin font_active_color(){
  color: $font-active-color-theme;
  [data-theme=theme1] & {
    color: $font-active-color-theme1;
  }
  [data-theme=theme2] & {
    color: $font-active-color-theme2;
  }
}

@mixin border_color(){
  border-color: $border-color-theme;
  [data-theme=theme1] & {
    border-color: $border-color-theme1;
  }
  [data-theme=theme2] & {
    border-color: $border-color-theme2;
  }
}

@mixin bg_img($url){
  [data-theme=theme] & {
    background-image: url($url + '_163.png');
  }
  [data-theme=theme1] & {
    background-image: url($url + '_qq.png');
  }
  [data-theme=theme2] & {
    background-image: url($url + '_it.png');
  }
  background-size: cover;
  background-repeat: no-repeat;

  [data-theme=theme][data-dpr='2'] & {
    background-image: url($url + '[e-mail]');
  }
  [data-theme=theme][data-dpr='3'] & {
    background-image: url($url + '[e-mail]');
  }
  [data-theme=theme1][data-dpr='2'] & {
    background-image: url($url + '[e-mail]');
  }
  [data-theme=theme1][data-dpr='3'] & {
    background-image: url($url + '[e-mail]');
  }
  [data-theme=theme2][data-dpr='2'] & {
    background-image: url($url + '[e-mail]');
  }
  [data-theme=theme2][data-dpr='3'] & {
    background-image: url($url + '[e-mail]');
  }
}

在reset.scss文件中，暴力清空默认样式

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
a{text-decoration: none}
#yui3-css-stamp.cssreset{display:none}

在base.scss文件中，定义全局样式

@import "./reset.scss";
@import "./variable.scss";
@import "./mixin.scss";

// 这个文件定义相关全局样式
html, body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  // 解决IScroll拖拽卡顿问题
  touch-action: none;
}
body{
  @include font_size($font_medium);
  //@include font_size(50px);
  //font-size: 50px;
  font-family: Helvetica,sans-serif,STHeiTi;
}
img{
  vertical-align: bottom;
}

在组件中，使用定义的scss样式

<template>
  <div class="parent">
    <div>引用scss样式</div>
  </div>
</template>
<style lang="scss">
@import "../../assets/css/variable.scss"; // 引入定义的变量
@import "../../assets/css/mixin.scss"; // 引入定义的混合
.parent{
  div {
    @include font_size($font_large);
    @include bg_color();
  }
}
</style>

结果