<template lang="jade">
.wrap
    text.text-hi {{hi}}
    text.text-name {{name}}
</template>

<style lang="cssnext">
    :root {
        --mainColor: red;
        --subColor: green;
        --normalFont: {
            font-size: 26px;
        };
    }

    .wrap {
        flex-direction: row;
    }

    .text-hi {
        color: var(--mainColor);
        @apply --normalFont;
    }

    .text-name {
        color: var(--subColor);
        @apply --normalFont;
    }
</style>

<script>
import modal from '@weex-module/modal'

export default {
    ready() {
        modal.toast({'message': 'ready'})
    },

    data() {
        return {
            hi: 'Hello',
            name: 'Weex'
        }
    }
}
</script>