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.

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Vue.js - TUTORIAL

Ú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.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!