App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default  {
  name:  'App',
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
}
</script>
<style lang="scss">
.page-title{
  font-size:16px;
  margin:20px 0;
  display:flex;
  align-items:center;
  &:before{
    content: '';
    width:5px;
    height: 15px;
    background:#666;
    margin-right:10px;
  }
}
.flex{
  display: flex;
}
.flex-1{
  flex: 1;
}
.center{
  align-content: center;
  text-align: center;
}
.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
$sizes: 10,20,30,50,100,150,200,500,800,1000;
@for $i from 1 through length($sizes){
  $item: nth($sizes, $i);
  .ml-#{$item}{
    margin-left: #{$item}px;
  }
  .mr-#{$item}{
    margin-right: #{$item}px;
  }
  .mb-#{$item}{
    margin-bottom: #{$item}px;
  }
  .mt-#{$item}{
    margin-top: #{$item}px;
  }
  .w-#{$item}{
    width: #{$item}px;
  }
}
</style>