目录

  1. src/assets/css/...
  2.   - base.scss  - 将其他scss导入的地方 & 配置一些样式
  3.   - reset.scss - html, body等初始化配置
  4.   - variable.scss - 定义变量的地方(字体/背景颜色/字体颜色...)
  5.   - mixin.scss - 混合 自定义函数动态设置样式

文件定义

base.scss

  1. @import "./reset.scss";
  2. @import "./variable.scss";
  3. @import "./mixin.scss";
  5. html, body{
  6.   width: 100%;
  7.   height: 100%;
  8.   overflow: hidden;
  9.   // 解决IScroll拖拽卡顿问题
  10.   touch-action: none;
  11. }
  12. body{
  13.   //$font_medium in variable.scss
  14.   @include font_size($font_medium);
  15.   //@include font_size(50px);
  16.   //font-size: 50px;
  17.   font-family: Helvetica,sans-serif,STHeiTi;
  18. }
  19. img{
  20.   vertical-align: bottom;
  21. }

reset.scss

  1. /*
  2. YUI 3.18.1 (build f7e7bcb)
  3. Copyright 2014 Yahoo! Inc. All rights reserved.
  4. Licensed under the BSD License.
  5. http://yuilibrary.com/license/
  6. */
  8. html{color:#000;background:#FFF}
  9. 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}
  10. table{border-collapse:collapse;border-spacing:0}
  11. fieldset,img{border:0}
  12. address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
  13. ol,ul{list-style:none}
  14. caption,th{text-align:left}
  15. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
  16. q:before,q:after{content:''}
  17. abbr,acronym{border:0;font-variant:normal}
  18. sup{vertical-align:text-top}
  19. sub{vertical-align:text-bottom}
  20. input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
  21. legend{color:#000}
  22. a{text-decoration: none}
  23. #yui3-css-stamp.cssreset{display:none}

variable.scss

  1. //字体定义规范
  2. $font_samll:12Px;
  3. $font_medium_s:13Px;
  4. $font_medium:15Px;
  5. $font_large:17Px;
  7. // 背景颜色规范(主要)
  8. $background-color-theme: #d43c33;//背景主题颜色默认(网易红)
  9. $background-color-theme1: rgba(34,213,156,1);//背景主题颜色1(QQ绿)
  10. $background-color-theme2: #333;//背景主题颜色2(夜间模式)
  12. // 背景颜色规范(次要)
  13. $background-color-sub-theme: #f5f5f5;//背景主题颜色默认(网易红)
  14. $background-color-sub-theme1: #f5f5f5;//背景主题颜色1(QQ绿)
  15. $background-color-sub-theme2: #444;//背景主题颜色2(夜间模式)
  17. // 字体颜色规范(默认)
  18. $font-color-theme : #666;//字体主题颜色默认(网易)
  19. $font-color-theme1 : #666;//字体主题颜色1(QQ)
  20. $font-color-theme2 : #ddd;//字体主题颜色2(夜间模式)
  22. // 字体颜色规范(激活)
  23. $font-active-color-theme : #d43c33;//字体主题颜色默认(网易红)
  24. $font-active-color-theme1 : rgba(34,213,156,1);//字体主题颜色1(QQ绿)
  25. $font-active-color-theme2 : #ffcc33;//字体主题颜色2(夜间模式)
  27. // 边框颜色
  28. $border-color-theme : #d43c33;//边框主题颜色默认(网易)
  29. $border-color-theme1 : rgba(34,213,156,1);//边框主题颜色1(QQ)
  30. $border-color-theme2 : #ffcc33;//边框主题颜色2(夜间模式)

mixin.scss

  1. @import "./variable.scss";
  2. /*根据dpr计算font-size*/
  3. @mixin font_dpr($font-size){
  4.   font-size: $font-size;
  5.   // 根据像素比缩放字体大小 达到视口变化而字体不变
  6.   [data-dpr="2"] & { font-size: $font-size * 2;}
  7.   [data-dpr="3"] & { font-size: $font-size * 3;}
  8. }
  9. /*通过该函数设置字体大小，后期方便统一管理；*/
  10. @mixin font_size($size){
  11.   @include font_dpr($size);
  12. }
  13. // 不换行
  14. @mixin no-wrap(){
  15.   text-overflow: ellipsis;
  16.   overflow: hidden;
  17.   white-space: nowrap;
  18. }
  19. // 限制行数
  20. @mixin clamp($row){
  21.   overflow:hidden;
  22.   text-overflow:ellipsis;
  23.   display:-webkit-box;
  24.   -webkit-box-orient:vertical;
  25.   -webkit-line-clamp:$row;
  26. }
  28. //根据属性选择器设置背景颜色
  29. @mixin bg_color(){
  30.   background: $background-color-theme;
  31.   [data-theme=theme1] & {
  32.     background: $background-color-theme1;
  33.   }
  34.   [data-theme=theme2] & {
  35.     background: $background-color-theme2;
  36.   }
  37. }
  39. //不同主题和不同像素比下显示不同图片
  40. //不同设置background:url() 这样background-size不起作用
  41. @mixin bg_img($url) {
  42.   [data-theme=theme] & {
  43.     background-image: url($url + '_163.png');
  44.   }
  45.   [data-theme=theme1] & {
  46.     background-image: url($url + '_qq.png');
  47.   }
  48.   [data-theme=theme2] & {
  49.     background-image: url($url + '_it666.png');
  50.   }
  51.   background-size: cover;
  52.   background-repeat: no-repeat;
  54.   [data-theme=theme][data-dpr='2'] & {
  55.     background-image: url($url + '_163@2x.png');
  56.   }
  57.   [data-theme=theme][data-dpr='3'] & {
  58.     background-image: url($url + '_163@3x.png');
  59.   }
  60.   [data-theme=theme1][data-dpr='2'] & {
  61.     background-image: url($url + '_qq@2x.png');
  62.   }
  63.   [data-theme=theme1][data-dpr='3'] & {
  64.     background-image: url($url + '_qq@3x.png');
  65.   }
  66.   [data-theme=theme2][data-dpr='2'] & {
  67.     background-image: url($url + '_it666@2x.png');
  68.   }
  69.   [data-theme=theme2][data-dpr='3'] & {
  70.     background-image: url($url + '_it666@3x.png');
  71.   }
  72. }
  74. //改变tabbar背景颜色
  75. @mixin bg_sub_color(){
  76.   background: $background-color-sub-theme;
  77.   [data-theme=theme1] & {
  78.     background: $background-color-sub-theme1;
  79.   }
  80.   [data-theme=theme2] & {
  81.     background: $background-color-sub-theme2;
  82.   }
  83. }
  85. //改变tabbar字体颜色
  86. @mixin font_color(){
  87.   color: $font-color-theme;
  88.   [data-theme=theme1] & {
  89.     color: $font-color-theme1;
  90.   }
  91.   [data-theme=theme2] & {
  92.     color: $font-color-theme2;
  93.   }
  94. }
  96. //改变tabbar字体激活线颜色
  97. @mixin font_active_color(){
  98.   color: $font-active-color-theme;
  99.   [data-theme=theme1] & {
  100.     color: $font-active-color-theme1;
  101.   }
  102.   [data-theme=theme2] & {
  103.     color: $font-active-color-theme2;
  104.   }
  105. }
  107. //tabbar下划线
  108. @mixin border_color(){
  109.   border-color: $border-color-theme;
  110.   [data-theme=theme1] & {
  111.     border-color: $border-color-theme1;
  112.   }
  113.   [data-theme=theme2] & {
  114.     border-color: $border-color-theme2;
  115.   }
  116. }

组件使用

<style lang="scss" scoped>
@import "../assets/css/mixin";
@import "../assets/css/variable";

  .song-list{
    width: 100%;
    @include bg_sub_color();
    .item{
      height: 200px;
      width: 100%;
      border-bottom:1px solid #fff;
      padding: 0 20px;
      display: flex;
      align-items: center;
      img{
        width: 150px;
        height: 150px;
        border-radius: 20px;
        margin-right: 20px;
      }
      h3{
        @include font_color();
        @include font_size($font_large);
      }
      p{
        @include font_color();
        @include font_size($font_samll);
        margin-top: 20px;
        opacity: 0.6;
      }
    }
  }
</style>