本文档是为了规范主题样式和统一格式，如UI框架以下面一种为主要预编译语言，则界面内部样式使用则书写一致

LESS

Theme

• HTML

<div class="lessWrap">
<div class="drak">
  <span class="balance">aaa</span>
</div>
<div class="normal">
  <span class="balance">bb</span>
</div>
</div>

• CSS

.theme (drak) {
@color:#0ff;
}
.theme (normal) {
@color:#000;
}

.buildThemes(drak);
.buildThemes(normal);

.buildThemes(@style) {
  .@{style} {
    color:red;
    .theme(@style);
    .balance {
      color : @color;
    }
  }
}

• E.g

<div class="lessWrap">
<div class="drak">
  <span class="balance">aaa</span>
</div>
<div class="normal">
  <span class="balance">bb</span>
</div>
</div>

全局变量

此处全局变量为了减少less文件引用而配置在vue.config.js中,详情请参考 TradeDecentralizationFrontendMobileV2项目 master 分支

添加依赖

npm install -D less-loader less
vue add style-resources-loader

选择你使用的预处理器

配置 vue.config

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
         './src/common/less/var.less'
      ]
    }
  },

SASS

Theme

• HTML

<div class="sassWrap">
<div class="drak">
  <div class="balance">
    1111
    <p class="block">111-1</p>
  </div>
</div>
<div class="normal">
  <div class="balance">
    1111
    <p class="block">111-1</p>
  </div>
</div>
</div>

• CSS

$themes: (
  drak: (
    font-color: red,
    font-color1: #010101
  ),
  normal: (
    font-color: green,
    font-color1: #020202
  )
);

@mixin themify($themes: $themes) {
  @each $theme-name, $map in $themes {
    .#{$theme-name} & {
      $theme-map: () !global;
      @each $key, $value in $map {
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;

      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

 .balance {
@include themify($themes) {
    color: themed('font-color');
    .block{
      color: themed('font-color1');
    }
  }
}

• E.g

<div class="drak">
  <span class="balance">aaa</span>
</div>
<div class="normal">
  <span class="balance">bb</span>
</div>

全局变量

此处全局变量为了减少scss文件引用而配置在vue.config.js中

添加依赖

# Less
npm install -D sass-loader node-sass
vue add style-resources-loader

选择你使用的预处理器

配置 vue.config

• 配置css模块

css: {
  loaderOptions: {
    sass: {
      // @/ 是 src/ 的别名
      // 所以这里假设你有 `src/commom/scss/variables.scss` 这个文件
      data: `@import "~@/commom/scss/variables.scss";`
    }
  }
}

Stylus

Theme

• HTML

<div class="stylusWrap">
    <div class='drak'>
      <span class='balance'>aaa</span>
    </div>
    <div class='normal'>
      <span class='balance'>aaa</span>
    </div>
</div>

• CSS

$color-drak=#0ff
$color-normal=#000

for i in normal drak 
  .{i}
   color #f00
   .balance
     color ($ + ('color-'+i))

• E.g

<div class="stylusWrap">
<div class="drak">
  <span class="balance">aaa</span>
</div>
<div class="normal">
  <span class="balance">bb</span>
</div>
</div>

全局变量

此处全局变量为了减少styl文件引用而配置在vue.config.js中,详情请参考 DappFrontendMobile项目

添加依赖

npm install -D stylus-loader stylus
vue add style-resources-loader

选择你使用的预处理器

配置 vue.config

• 引用path模块

const path = require('path')

• 配置css模块

css: {
  loaderOptions: {
    stylus: {
        // 所以这里假设你有 `src/commom/styl/global.styl` 这个文件
        import: path.resolve(__dirname, './src/commom/styl/global.styl')
     },
  }
}