Bion auto style

Auto generate css code from special class names with existing scss variables

Installation

npm install bion-auto-style

Configuration

Add to buildModules in nuxt.config.js:

buildModules: [
    'bion-auto-style'
]

With options

buildModules: [
    ['bion-auto-style', {
        pattern: 'assets/components/*.scss',
        output: 'assets/auto-style/index.scss',
        watch: true
    }]
]

pattern

• Path that located scss variables
• Default: assets/components/*.scss
• Type: string

output

• Path for auto generated css code
• Default: assets/auto-style/index.scss
• Type: string

watch

• Css code generates when code changes in file
• Default: true
• Type: boolean

Add output path to css in nuxt.config.js:

css: [
    '@/assets/auto-style/index.scss'
]

How does it work?

When you write code in pages/index.vue or any file that belongs to classPattern like this:

<template>
    <div class="a-block">
        Hello World
    </div>
</template>

If variable exists in any file that belongs to scssPattern like this:

$a-block-font-size: 14px;
$a-block-border: 1px solid black;

Auto generate code to output file like this:

.a-block {
  font-size: $a-block-font-size;
  border: $a-block-border;
}

Structure:

$a-block-border - $class-css_property

$a-block-font-size will split to a-block and font-size and will write to css file

Dasturchi bu proyektdan foydalanish orqali
faqatgina scss o'zgaruvchisi orqali html teg va
componentlarning stylelarini boshqarish va
kodni qisqartirish imkoniyatiga ega bo'ladi.

Examples

$a-button-border: 1px solid black;

Generated scss code

.a-button {
  border: $a-button-border;
}

$a-button\>a-text-color: red;

Generated scss code

.a-button > .a-text {
  color: $a-button\>a-text-color;
}

$a-block\.button\.a-text-color: red;

Generated scss code

.a-block.button.a-text {
  color: $a-block\.button\.a-text-color;
}

$a-button-color\:hover: blue;

Generated scss code

.a-button:hover {
  color: $a-button-color\:hover;
}