Perú

Lima,Perú

Sublime Text 3 trabajar con Sass y SCSS

Fecha Publicación:       19 de Julio de 2020
Fecha Modificación:       20 de Julio de 2020

Recuerda presionar las teclas Ctrl+Shift+P  para abrir Package Control el controlador de paquetes / plugin, que ya se debio haber instalado,  ver tutorial Sublime Text 3 Instalar Control de Paquetes.

Sass es un pre-procesador de CSS con los avances de sintaxis. Las hojas de estilo en la sintaxis avanzada son procesadas por el programa, y ​​se convierten en hojas de estilo CSS regulares. Sass  adiciona características que carece dolorosamente CSS (como las variables).

Compilar SASS / SCSS en sublime Text 

Instalamos los siguientes Plugins: 

1.-Descargue e instale el instalador de Ruby

2.- Instale el Plugin Sass.

2.- Instala el plugin SASS Build, una vez Instalado, abrimos el archivo scss y presionamos la tecla Ctrl+B y compilara el archivo scss y crea los archivos .css y .map y los crea en el mismo directorio del archivo scss. 

Página Oficial de SASS Build   

3.- Por defecto lo compila sin comprimir si deseas compilación comprimida debemos ir a :

Menu Herramientas --> Build System --> SASS Compressed   , pero antes devemos eliminar el archivo compilado .css y .map porque no lo reescribe.

Resaldo de Sintaxis para SASS

Este es un paquete Sublime Text 3 que puramente forzado a resaltar la sintaxis Sass y SCSS tan precisa como sea posible. Asegúrese de que su versión de Sublime Text 3 está por encima de la compilación 3103.

1.- Devemos Instalar el plugin  Syntax Highlighting for Sass 

Página Oficial de Syntax Highlighting for Sass

2.- Si no resalta los codigos de los archivos scss y los que empiezan con guion abajo "_" pintando de colores  devemos ir a
       Menu Mostrar --> Sintaxis -->  Syntax Highlighting for Sass --> SCSS   

Nota: debemos abrir esos 2 tipos de archivos scss con nombre sin guion abajo y los que tienen guion abajo "_"   y asignarles su Sintaxis como muestra el paso 2.

Otros enlaces de interes: 

https://stackoverflow.com/search?page=2&tab=Relevance&q=Sublime%20Text

 

Leidas : 324 Veces
Compartir: