sass
Partiales e Importaciones
Buscar..
Importador
El uso de @import permite dividir sus archivos en varios archivos más pequeños. Esto tiene sentido, ya que puede mantener una mejor estructura para sus hojas de estilo y evitar archivos muy grandes.
Ejemplo
Digamos que tienes unos cuantos archivos.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Su application.scss hoja de estilo principal.scss puede importar todos los archivos, así como definir sus propios estilos.
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss
body {
margin: 0;
}
Tenga en cuenta que también puede omitir la extensión .scss para que pueda escribir @import 'header'; En lugar de @import 'header.scss' .
Esto lleva a application.scss tener todos los .scss importados incluidos en el archivo compilado que sirve al cliente (navegador). En este caso, su archivo compilado sería application.css que incluirá en su html.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Si bien está trabajando con varios archivos, solo sirve un archivo, eliminando la necesidad de múltiples solicitudes (una para cada archivo) y acelerando el tiempo de carga para sus visitantes.
Principales beneficios
- Mejor estructura para desarrollo utilizando carpeta y múltiples archivos.
- Servir solo un archivo al cliente (navegador)
Parciales
Puede crear archivos parciales que contienen fragmentos más pequeños de sus hojas de estilo. Esto le permite modularizar su CSS y permite una mejor estructura de sus hojas de estilo. Un parcial es un archivo Sass nombrado con un subrayado _partial.scss , es decir: _partial.scss . El subrayado le permite a Sass saber que el archivo específico es parcial y no se generará en un archivo CSS.
Los parciales de Sass deben utilizarse con la directiva @import . Cuando use @import , puede omitir el guión bajo.
Ejemplo
Suponiendo que tienes una estructura de archivos con parciales como este
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
Puede incluir esos parciales en su archivo main.scss la siguiente manera (en este ejemplo, se omiten los guiones bajos y las extensiones de archivo):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';