Fundação - Sass

SASS ajuda a tornar o código mais flexível e customizável no Foundation.

Compatibilidade

Para instalar a versão baseada em SASS para o Foundation, Ruby deve ser instalado no Windows. O Foundation pode ser compilado com Ruby SASS e libsass. Nós recomendamosnode-sass 3.4.2+ versão para compilar SASS.

Autoprefixer necessário

Autoprefixer lida com arquivos SASS. gulp-autoprefixer é usado para construir o processo. A seguinte configuração autoprefixer é usada para obter o suporte adequado do navegador.

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

Carregando o Framework

Podemos instalar os arquivos da estrutura usando NPM. Usando a interface de linha de comando (CLI), podemos compilar os arquivos Sass. A seguir está o comando para carregar o framework -

npm install foundation-sites --save

Depois de executar o código de linha de comando acima, você obterá as seguintes linhas -

Compilando Manualmente

Os arquivos do framework podem ser adicionados como um caminho de importação dependendo do seu processo de construção, mas o caminho será o mesmo packages_folder / foundation-sites / scss . A instrução @import está incluída no início do arquivo foundation-sites.scss . A próxima linha no código fornecido é explicada noAdjusting CSS Output seção.

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

Usando CSS Compilado

Você pode incluir os arquivos CSS pré-compilados. Existem dois tipos de arquivos CSS, ou seja, minimizados e não minimizados. A versão reduzida é usada para produção e a versão não reduzida é usada para editar diretamente o CSS do framework.

<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">

Ajuste de saída CSS

Para vários componentes, a saída do Foundation consiste em várias classes. É usado para controlar a saída CSS da estrutura. Adicione a seguinte linha única de código para incluir todos os componentes de uma vez.

@include foundation-everything;

A seguir está a lista dos componentes importados quando você escreve o código acima em seu arquivo scss. Os componentes que não são necessários podem ser comentados. Você pode visualizar as linhas de código fornecidas a seguir no arquivo 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....

O arquivo de configurações

Um arquivo de configurações está incluído em todo o projeto de fundação, ou seja, _settings.scss . Se estiver usando o Yeti Launch ou a CLI para criar um projeto do Foundation for Sites, você pode encontrar o arquivo de configurações em src / assets / scss /.

Instalamos o Foundation usando o npm, portanto, você pode encontrar o arquivo de configurações incluído em your_folder_name / node_modules / Foundation-sites / scss / settings / _settings.scss . Você pode mover isso para seus próprios arquivos Sass para trabalhar.

Você pode escrever seu próprio CSS, se não for capaz de personalizá-lo com variáveis. A seguir está um conjunto de variáveis, que alteram o estilo padrão dos botões.

$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;