Fondazione - Sass

SASS aiuta a rendere il codice più flessibile e personalizzabile in Foundation.

Compatibilità

Per installare la versione basata su SASS per la fondazione, Ruby dovrebbe essere installato su Windows. Foundation può essere compilato con Ruby SASS e libsass. Noi raccomandiamonode-sass 3.4.2+ versione per compilare SASS.

Autoprefixer richiesto

Il prefissatore automatico gestisce i file SASS. gulp-autoprefixer viene utilizzato per costruire il processo. La seguente impostazione di autoprefixer viene utilizzata per ottenere il supporto appropriato del browser.

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

Caricamento del Framework

Possiamo installare i file del framework utilizzando NPM. Utilizzando l'interfaccia a riga di comando (CLI), possiamo compilare i file Sass. Di seguito è riportato il comando per caricare il framework:

npm install foundation-sites --save

Dopo aver eseguito il codice della riga di comando sopra, otterrai le seguenti righe:

Compilazione manuale

I file Framework possono essere aggiunti come percorso di importazione a seconda del processo di compilazione, ma il percorso sarà lo stesso packages_folder / foundation-sites / scss . L' istruzione @import è inclusa nella parte superiore del file foundation-sites.scss . La riga successiva nel codice dato è spiegata inAdjusting CSS Output sezione.

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

Utilizzo di CSS compilato

Puoi includere i file CSS precompilati. Esistono due tipi di file CSS, ovvero minimizzati e non minimizzati. La versione ridotta viene utilizzata per la produzione e la versione non ridotta viene utilizzata per modificare direttamente il CSS del 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">

Regolazione dell'output CSS

Per vari componenti, l'output di Foundation è costituito da molte classi. Viene utilizzato per controllare l'output CSS del framework. Aggiungi la seguente singola riga di codice per includere tutti i componenti contemporaneamente.

@include foundation-everything;

Di seguito è riportato l'elenco dei componenti importati quando si scrive il codice sopra nel file scss. I componenti che non sono necessari possono essere commentati. È possibile visualizzare le righe di codice riportate di seguito nel file 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....

Il file delle impostazioni

Un file delle impostazioni è incluso nell'intero progetto di fondazione, ad esempio _settings.scss . Se stai utilizzando Yeti Launch o la CLI per creare un progetto Foundation for Sites, puoi trovare il file delle impostazioni in src / assets / scss /.

Abbiamo installato Foundation utilizzando npm, quindi puoi trovare il file delle impostazioni incluso in your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss . Puoi spostarlo nei tuoi file Sass con cui lavorare.

Puoi scrivere il tuo CSS, se non sei in grado di personalizzare con le variabili. Di seguito è riportato un insieme di variabili che modificano lo stile predefinito dei pulsanti.

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