Usando SASS para componentes do vue.js em aplicações single page
Aplicações single page estão a cada dia crescendo no mercado e vue.js é um framework que vem se destacando muito nesse meio além de ser simples.
Última atualização em: | 5625 Visualizações
Neste post será mostrado como adicionar SASS
ao seu projeto permitindo estilizar seus componentes de maneira mais dinâmica.
O Vue CLI vem parcialmente pronto para utilizar SASS
para a estilização dos seus componentes, porém precisa ser instalado os módulos que ele precisa para o pré-processador SASS
.
Para fazer isso, acesse o terminal e insira o comando:
npm install node-sass@4.5.0 sass-loader@4.1.1 --save-dev
Pronto, com os módulos do node necessários instalados, precisamos agora criar nossos componentes utilizando o SASS
em seu estilo.
Para criar qualquer componente no vue utilizamos o seguinte template:
<template>
<!? html ?>
</template>
export default {
}
<style scoped>
<!? css ?>
</style>
A partir deste template podemos iniciar a criação do componente Painel, um componente muito simples e não muito elegante mas que vai ajudar a entender a utilizar SASS para sua estilização, conforme segue código abaixo:
<template>
{{ titulo }}
</template>
export default {
props: [?titulo?]
}
<style scoped>
.painel {
backgroud: red;
border: 1px solid #000;
}
</style>
A partir de agora uma simples alteração fará a diferença para utilizarmos o pré-compilador SASS no componente, precisamos alterar a tag <style> da segunte maneira:
<style scoped lang=?scss?>
$cor: red;
.painel {
backgroud: $cor;
border: 1px solid #000;
}
</style>
A partir de agora já pode utilizar a sintaxe do SASS para estilizar qualquer componente em seu projeto single page.
Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.