Comenzar un proyecto usando Vue.js es bien fácil. A través del vue-cli tenemos lo básico para arrancar de inmediato. Una de las opciones que incluye esta configuración es la habilidad de poder utilizar SASS o SCSS en tu proyecto. En resumen, SASS/SCSS es el siguiente paso, una vez nos sintamos cómodos con CSS, para poder construir hojas de estilo manejables y de fácil mantenimiento. Para poder aprovechar dicho funcionamiento debes añadir los módulos: npm install sass-loader node-sass –save-dev.
En el siguiente ejemplo, hemos incorporado elementos escritos en SASS de la librería Bulma a un componente de Vue.js.
<template>
<div id="app">
<a class="button is-active">Hello</a>
<a class="button is-primary">Primary button</a>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss" scope>
@import '../node_modules/bulma/sass/utilities/_all.sass';
@import '../node_modules/bulma/sass/elements/button.sass';
</style>
Utilizando el atributo lang le estamos indicando a Webpack que procese los archivos .sass y los compile a CSS. Si te preguntas cual es la diferencia entre SASS y SCSS… pues la primordial es la sintaxis como se escriben las reglas de estilo. SASS utiliza espacios e indentación para organizar las reglas (similar a HAML) y SCSS es más expresivo, la sintaxis es similar a vanilla CSS.
Recuerda, utilizar SASS en tu proyecto es opcional. Pero cualquier opción que ayude a mejorar la claridad de código y aporte al mantenimiento del mismo debe ser considerado.