WordPress : Sass con el editor Visual Studio Code y Live Sass Compiler
Cómo usar Sass en Wordpress con el editor Visual Studio Code y la extensión Live Sass Compiler
→ Ir a la documentacion Oficial Live Sass Compiler
→ Ir Configuración de comandos
Configuración
Set this to false if you don't want all sass files to be compiled when live sass compiler starts watching
Establezca esto en falso si no desea que se compilen todos los archivos sass cuando el compilador sass en vivo comience a mirar
liveSassCompile.settings.formats
"liveSassCompile.settings.formats": [
{
"format": "expanded",
// "format": "compact",
// "format": "compressed",
// "format": "nested",
"extensionName": ".css",
// "extensionName": ".min.css",
"savePath":"/css"
}
]Live Sass Compiler : Compilar archivos de una carpeta especifica
Si deseamos compilar solo los archivos de determinada carpeta debemos configurar Live Sass Compiler en visual studio , para eso debemos seguir los siguientes pasos
1. - En visual studio code buscamos en el lado izquierdo el simbolo engranaje (rueda) , luego presionamos en la opcion Settings (Configuracion) (Ctrl + , )
2. - En el cuadro de busqueda escribimos Live Sass Compiler
3. - Escogemos en el lado derecho la opción Live Sass Compile › Settings : Force Base Directory
Define un subdirectorio desde el que buscar los archivos para compilar (no se buscara ningún directorio fuera de este)
→ Presionamos el enlace Edit in settings.json.
Nos saldra algo parecido a estos comandos
{
"workbench.editor.untitled.hint": "hidden",
"php.validate.executablePath": "C:/wamp64/bin/php/php7.4.26/php.exe",
"window.zoomLevel": 1,
"liveSassCompile.settings.autoprefix": [],
"liveSassCompile.settings.forceBaseDirectory": ""
}Dentro de las comillas de la instrucción : "liveSassCompile.settings.forceBaseDirectory": "" , debemos poner la ruta de la carpeta a compilar.
Por ejemplo :
Si estamos trabajando con las carpetas de wordpress dentro de visual studio code , seleccionamos la carpeta donde estan los archivos a compilar dentro de la plantilla activa y hacemos click derecho , y escogemos la opcion Copy relative Path (Copiar Ruta de Acceso Relativa)
"liveSassCompile.settings.forceBaseDirectory": ""Ejemplo: supongamos que los archivos scss estan dentro de la carpeta sass , al copiar la ruta de acceso relativa nos imprimira de la siguiente manera - templates\3modelo\estilos\sass , aqui debemos cambiar la barra diagonal '\' por esta '/' , al final quedaria :
"liveSassCompile.settings.forceBaseDirectory": "/templates/3modelo/estilos/sass"
o
"liveSassCompile.settings.forceBaseDirectory": "wp-content/themes/MiTema04-gamatel_01/sass",
Ejemplo Live Sass Compiler para configurar una carpeta especifica
Live Sass Compiler : Configurar una Lista de exclusión de carpetas
→ Ir a la documentacion oficial de Configuración de Live Sass Compiler
Si deseamos excluir determinadas carpetas enla compilación debemos seguir los siguientes pasos:
1. - En visual studio code buscamos en el lado izquierdo el simbolo engranaje (rueda) , luego presionamos en la opcion settings (Ctrl + , )
2. - En el cuadro de busqueda escribimos Live Sass Compiler
3. - En las opciones de configuración buscamos Live Sass Compile › Settings: Exclude List - (Configuración: Lista de exclusión)
Se excluirán todos los archivos Sass/Scss dentro de las carpetas.
Examples:
'/**/node_modules/**',
'/.vscode/**',
'/.history/**'
Ejemplo para excluir carpetas de Wordpress en Live Sass Compiler:
Se excluirán todos los archivos Sass/Scss dentro de las carpetas.
/wp-admin/**
/**/plugins/**
Live Sass Compiler : No generar MAP para cada CSS compilado
Establézcalo en `false` si no desea un archivo `.map` para cada CSS compilado.
El valor predeterminado es `verdadero`
Si deseamos no generar un archivo `.map` para cada CSS compilado debemos seguir los siguientes pasos:
1. - En visual studio code buscamos en el lado izquierdo el simbolo engranaje (rueda) , luego presionamos en la opcion settings (Ctrl + , )
2. - En el cuadro de busqueda escribimos Live Sass Compiler
3. - En las opciones de configuración buscamos Live Sass Compile › Settings: Generate Map
→ Presionamos el enlace Edit in settings.json. y definimos a falso en la siguiente instrucción:
"liveSassCompile.settings.generateMap": false
Live Sass Compiler : Ruta donde se guardara el archivo Sass compilado (css)
Establezca sus estilos CSS exportados, formatos y ubicación de guardado.
Si deseamos definir donde se guardara el archivo Sass compilado (css), debemos seguir los siguientes pasos:
1. - En visual studio code buscamos en el lado izquierdo el simbolo engranaje (rueda) , luego presionamos en la opcion settings (Ctrl + , )
2. - En el cuadro de busqueda escribimos Live Sass Compiler
3. - En las opciones de configuración buscamos : Live Sass Compile › Settings: Formats
→ Presionamos el enlace Edit in settings.json. :
{
"format": "expanded",
"extensionName": ".css",
"savePath": null,
"savePathReplacementPairs": null
}Dentro de las comillas de la instrucción : "savePath": "" , definimos la carpeta donde se guardara el archivo compilado (css).
→ Si estamos trabajando con las carpetas de wordpress dentro de visual studio code , seleccionamos la plantilla activa y hacemos click derecho , y escogemos la opcion Copy relative Path (Copiar Ruta de Acceso Relativa)
Ejemplo: Supongamos que deseamos guardar el archivo compilado en la carpeta estilos , al copiar la ruta de acceso relativa nos imprimira de la siguiente manera - templates\3modelo\estilos , aqui debemos cambiar la barra diagonal '\' por esta '/' , al final quedaria :
"savePath": "/templates/3modelo/estilos",
"savePathReplacementPairs": nullGuardar notas de ruta
La ruta de guardado final depende de tres configuraciones: savePath, savePathSegmentKeys y savePathReplaceSegmentsWith. Sin embargo, savePath tiene prioridad sobre los tres.
- Usando
savePath- Comenzar con
/o\significa que la ruta es relativa a la raíz del espacio de trabajo - Comenzar con
~/o~\significa que es relativo al archivo que se está procesando
- Comenzar con