Sublime Text 3 y 4 trabajar con Sass y SCSS

Fecha Publicación:       19 de Julio de 2020
Fecha Modificación:       24 de Marzo de 2024

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 con SASS build en sublime Text 

Página Oficial de SASS Build   

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

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.

Resaltado 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 

Teclas ( CTRL+SHIFT+P )  en el cuadro de busqueda escribimos Package Control  : Install   Package luego buscamos 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 al  Menu opcion Mostrar o Vista --> 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

 

Articulo : 2205 - Veces Leidas
Compartir Articulo: