html - mixin - scss file

¿Cuántos archivos SCSS/SASS a un archivo CSS?

Question

¿Es posible hacer que sass escuche un directorio con muchos archivos sass y genere un archivo CSS? He encontrado una forma al incluir muchos archivos sass en uno (style.scss):

@import "scss/header";
@import "scss/footer";

Y luego ejecuta el siguiente código:

sass --watch style.scss:style.css

pero el problema es que tengo que cambiar ese archivo antes de generar un nuevo archivo CSS.

Answer 1

Puede decirle a SASS que mire una carpeta completa con:

sass --watch application/sass:public/stylesheets

Si importa todos sus archivos parciales, esto debería generar un archivo. Cada vez que edite un archivo en la carpeta, los archivos CSS se generarán automáticamente.

Answer 2

Si mira el directorio, sass podrá notar los cambios en los archivos importados y actualizar los archivos dependientes.

style.scss:

@import "header";
@import "footer";

Y hacer:

sass --watch .

Compilará todos los archivos en el directorio a .css; ignorando archivos cuyo nombre comienza con un _ .

Yo modifico _header.scss o _footer.scss, si también actualizaré style.scss.

También puede mostrar en otro directorio:

sass --watch .:output_dir/

Answer 3

Solo quería agregar, también puede llamar a Variables ($) y Mixins desde otros archivos.

Por ejemplo:

_variable.scss = $primary:#000
_header.scss = header {color:$primary;}
_footer.scss = footer {background:$primary}

custom.scss :

@import "_variables.scss";
@import "_header.scss";
@import "_footer.scss";

Salida = custom.css

header {color:#000;}
footer {background:#000;}