Fundación - Sass

SASS ayuda a que el código sea más flexible y personalizable en Foundation.

Compatibilidad

Para instalar la versión basada en SASS para la fundación, Ruby debe estar instalado en Windows. Foundation se puede compilar con Ruby SASS y libsass. Nosotros recomendamosnode-sass 3.4.2+ versión para compilar SASS.

Se requiere prefijo automático

Autoprefixer maneja archivos SASS. gulp-autoprefixer se utiliza para construir el proceso. La siguiente configuración de prefijo automático se utiliza para obtener la compatibilidad adecuada con el navegador.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Cargando el marco

Podemos instalar los archivos del marco usando NPM. Usando la interfaz de línea de comando (CLI), podemos compilar los archivos Sass. A continuación se muestra el comando para cargar el marco:

npm install foundation-sites --save

Después de ejecutar el código de línea de comando anterior, obtendrá las siguientes líneas:

Compilar manualmente

Los archivos del marco se pueden agregar como una ruta de importación dependiendo de su proceso de compilación, pero la ruta será la misma carpeta_paquetes / foundation-sites / scss . La instrucción @import se incluye en la parte superior del archivo foundation-sites.scss . La siguiente línea en el código dado se explica en elAdjusting CSS Output sección.

@import 'foundation';
@include foundation-everything;

Usando CSS compilado

Puede incluir los archivos CSS precompilados. Hay dos tipos de archivos CSS, es decir, minificados y no minificados. La versión minificada se utiliza para la producción y la versión no minificada se utiliza para editar directamente el marco CSS.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Ajustar la salida CSS

Para varios componentes, la salida de Foundation consta de muchas clases. Se utiliza para controlar la salida CSS del marco. Agregue la siguiente línea única de código para incluir todos los componentes a la vez.

@include foundation-everything;

La siguiente es la lista de los componentes importados cuando escribe el código anterior en su archivo scss. Se pueden comentar los componentes que no son necesarios. Puede ver las siguientes líneas de código en el archivo Your_folder_name / node_modules / foundation-sites / scss / foundation.scss .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

El archivo de configuración

Se incluye un archivo de configuración en todo el proyecto de base, es decir, _settings.scss . Si está utilizando Yeti Launch o la CLI para crear un proyecto de Foundation for Sites, puede encontrar el archivo de configuración en src / assets / scss /.

Hemos instalado Foundation usando npm, por lo tanto, puede encontrar el archivo de configuración incluido en your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss . Puede mover esto a sus propios archivos Sass para trabajar.

Puede escribir su propio CSS, si no puede personalizarlo con variables. A continuación se muestra un conjunto de variables que cambian el estilo predeterminado de los botones.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;