Usando SASS para componentes do vue.js em aplicações single page

Postado em por Wolmir Cezer Garbin em Vue.js | 76 Visualizações
Última atualização em:

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.

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.

Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

Posts relacionados


Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar