Tag Archives: scss

diseño

Incorporar SASS en Vue.js

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.