Hay mucho que decir sobre SASS y este no será un post de esos. Lo siento.
Lo que si deseo mostrar aquí es lo que me ocurrió el día en que solamente deseaba compilar mis archivos de SASS.
Al buscar mis opciones con papá Google todo parecía bastante sencillo. Todos los resultados si no es que casi todos, mostraban cómo hacerlo con node-sass. Tiene mucho sentido, ya que muchos de los proyectos que he visto anteriormente lo usan, pero nunca lo he visto trabajando solo.
Encontre como hacer únicamente la compilación de sass y esto es lo que sugerían usar en el package.json:
"scripts": {
"scss": "node-sass --watch scss -o css"
}
Y si, supongo que es lo correcto.
El caso es que al intentar correr el comando no funcionaba, pensé que podría ser tema de versiones de NPM y NODE-SASS, pero no. La respuesta llegó y me pareció bastante curiosa, ya que no me imaginé que el problema estaría en el editor que estaba usando: VS Code.
Si. En este caso el culpable es el editor que use, ya que al parecer, al momento de compilar en la consola del editor, VS code no daba la suficiente libertad a los archivos y node-sass los veía ocupados o perdidos en el lapso en que ocurría la compilación. Hago constar que el comando para compilar SI funciona con VS code, lo que no funcionaba es la opción de WATCH, por lo que usar esta combinación me estaba causando problemas, parte de la gracia de usar el sass es poder tener la compilación en cuanto hago un cambio y no tener que correr el comando una y otra vez.
La solución era reemplazar un archivo en node_modules/node-sass, pero no me parecía estable ya que en la siguiente clonación o actualización el ajuste se perdería.
Para mi la solución más estable fue simplemente dejar de usar node-sass y usar solamente sass.
"scripts": {
"scss": "sass --watch scss:css"
}
Esto si funciona como se esperaba, ahora al siguiente paso.
¿Cómo hacer que los calc en sass me permitieran usar variables?
La respuesta costó algo de encontrar, ya que algunas ideas usaban las variables directamente en el css, pero con sass es un poco diferente, mismo concepto, pero se escriben de otra manera:
min-height: calc(100vh - ( #{$headerHeight} + #{$footerheight} ) );